使用 v-on:eventName 监听事件
使用 $emit(eventName) 触发事件
HTML代码
<div id="app-7">
<p>{{total}}</p>
<btn-counter @increment="incrementTotal"></btn-counter>
<btn-counter @increment="incrementTotal"></btn-counter>
</div>
javascript代码
Vue.component('button-counter', {
template: '<button @click="increment">{{count}}</button>',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
this.$emit('increment')
}
}
})
var app7 = new Vue({
el: '#app-7',
data: {
total: 0
},
methods: {
incrementTotal() {
this.total += 1
}
}
})