一、组件注册
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>
发表回复