<div id="counter-event-example">
<p>{{total}}</p>
//这两个组件的total是共享的，counter是分开的
//父组件？监听increment事件，触发后调用父组件的incrementTotal方法
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
//子组件模板监听点击事件，触发后调用子组件自身incrementCounter方法
template:'<button v-on:click="incrementCounter">{{counter}}</button>',
data:function(){
return{
counter:0
}
},
methods: {
incrementCounter:function(){
this.counter +=1
this.$emit('increment') //子组件通过emit触发父组件中的increment事件
}
},
})
newVue({
el:'#counter-event-example',
data: {
total:0
},
methods: {
incrementTotal:function(){
this.total +=1
}
}
})
网友评论