Vue.js 组件 - 自定义事件

概述

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件，以下实例中子组件已经和它外部完全解耦了，它所做的只是触发一个父组件关心的内部事件

代码

<div id="app" style="text-align: center">
    <p style="color: red">{{total}}</p>
    <my-button v-on:increment="incrementTotal"></my-button>
    <my-button v-on:increment="incrementTotal"></my-button>
</div>
<script type="text/javascript">
    Vue.component('my-button', {
        template: '<button @click="incrementHandler">{{counter}}</button>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            incrementHandler: function () {
                this.counter++;
                this.$emit('increment');
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total++;
            }
        }
    })
</script>