Vue组件通信

使用 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
        }
    }
})