首先, 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>
