怎样在 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>

巴特西

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

最新文章

热门文章