Vue组件通信

使用 v-on:eventName 监听事件

使用 $emit(eventName) 触发事件

HTML代码

<div id="app-7">
    <p>{{total}}p>
    <btn-counter v-on:increment="incrementTotal">btn-counter>
    <btn-counter v-on:increment="incrementTotal">btn-counter>
div>

javascript代码

Vue.component('button-counter', {
    template: '{{count}}',
    data: function() {
        return {
            count: 0
        }
    },
    methods: {
        increment: function() {
            this.count += 1
            this.$emit('increment')
        }
    }
})
var app7 = new Vue({
    el: '#app-7',
    data: {
        total: 0
    },
    methods: {
        incrementTotal: function() {
            this.total += 1
        }
    }
})