怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

首先, Vue 里面的组件之间的数据流动是单向的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是隔离的. 就像两个嵌套的 黑盒子 .

能通过 props 向子组件传递数据其实是因为子组件暴露出了这个属性到外部, 但子组件并不知道是谁把数据传过来的.

要把数据传回给父组件, 那就需要 自定义事件, 这相当于是给子组件安了一个 监视器 , 使得父组件可以监测到子组件的一举一动, 这样也就可以拿到子组件的数据了.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Vue Test</title>
</head>

<body>
    <div id="app">
        <div id="counter-event-example">
            <p>{{ total }}</p>
            <!-- 父组件绑定子组件的自定义事件: increment -->
            <button-counter v-on:increment="incrementTotal"></button-counter>
            <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>

    <script>
        Vue.component('button-counter', {
            template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
            // 这里的 data 不是一个对象, 而是一个可以返回一个对象的函数
            // 好处是每个实例可维护一份被返回对象的独立拷贝，若 data 为对象则会影响其他实例
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                incrementHandler: function () {
                    this.counter += 1;
                    // $emit() 可将 调用当前方法的事件 外抛, 实现 自定义事件.
                    this.$emit('increment');
                }
            },
        })
        new Vue({
            el: '#counter-event-example',
            data: {
                total: 0
            },
            methods: {
                incrementTotal: function () {
                    this.total += 1
                }
            }
        })
    </script>
</body>

</html>