Vue组件通信

使用 v-on:eventName 监听事件

使用 $emit(eventName) 触发事件

HTML代码

<div id="app">
    <p v-bind:class="{active: isActive}">{{total}}</p>
    <btn-counter v-on:incre="incrementTotal"></btn-counter>
    <btn-counter v-on:incre="incrementTotal"></btn-counter>
</div>

javascript代码

Vue.component('button-counter', {
    template: '<button @click="increment">{{count}}</button>',
    data: function() {
        return {
            count: 0
        }
    },
    methods: {
        increment: function() {
            this.count += 1
            this.$emit('incre')
        }
    }
})
var vm = new Vue({
    el: '#app',
    data: {
        total: 0
    },
    methods: {
        incrementTotal: function() {
            this.total += 1
            this.isActive = true
        }
    }
})