共计 701 个字符,预计需要花费 2 分钟才能阅读完成。
一、组件注册
1、组件名:能够应用 kebab-case 短横线分隔命名, 也能够应用 PascalCase 驼峰命名。
2、全局注册
应用 Vue.component 来创立的组件作用域是全局,在任何新创建的 Vue 根实例(new Vue)的模板中,都能够应用。
<div id="app">
<my-component title='计数器' text='增加' @clicknow='getCount'>
<!-- span 会被放如到组件中 <slot> 标签的地位 -->
<span> 我是一个插入到组件开端的 span</span>
</my-component>
</div>
<script>
Vue.component('myComponent', {
props:[
'title',
'text'
],
data: function(){
return {count: 0}
},
methods:{add:function(){
this.count++
// 能够派发一个事件到组件实例,抛出一个值
// 应用 $emit(), 第一个参数是事件名称,第二个值是传递参数
this.$emit('clicknow',this.count)
}
},
template: `<div>
{{title}}
<div class="btn" @click='add'>{{text}}</div>
<span>{{count}}</span>
<!-- 通过插槽,能够向一个组件传递内容 -->
<slot></slot>
</div>`
})
let vm = new Vue({
el: '#app',
data: {},
methods: {getCount:function(e){alert(e)
}
}
})
</script>
正文完
发表至: javascript
2021-04-12