Vue2.0事件通信：父组件与子组件的交互实战

"Vue2.0的父组件与子组件之间的事件通信实例代码演示了如何在新版本中使用事件中心代替弃用的$dispatch和$broadcast方法。" 在Vue2.0中，为了促进组件间的通信，官方推荐使用事件中心（Event Bus）的方式，这是一种更加灵活的通信机制。在旧版本中，$dispatch用于将事件从子组件向父组件传递，而$broadcast则是用于从父组件向子组件传递事件。然而，这两个方法在Vue2.0中已被废弃，取而代之的是通过自定义事件和`v-on`指令来处理事件。 在这个实例中，我们创建了一个简单的应用，其中子组件包含加减按钮，用于控制父组件显示的商品数量。当用户点击这些按钮时，子组件会触发事件并将新的数量发送给父组件。为了实现这一点，首先我们需要在父组件的`data`选项中创建一个名为`eventHub`的空Vue实例，作为事件中心。 例如，父组件的代码可能如下所示： ```javascript // 父组件 <template> <!-- 省略HTML结构 --> </template> <script> export default { data() { return { eventHub: new Vue(), items: [], // 存储商品数据 }; }, methods: { handleCountChange(obj) { // 接收子组件传递的事件 console.log(obj); // 处理数量改变的逻辑 }, }, }; </script> ``` 子组件中，我们使用`this.$emit`来触发自定义事件，将数量和索引信息打包成对象发送给父组件。例如： ```javascript // 子组件 <template> <button @click="increase">+</button> <button @click="decrease">-</button> </template> <script> export default { props: ['child', 'parent'], // 接收父组件传入的索引信息 methods: { increase() { const obj = { count: 1, index: this.child, parent: this.parent }; this.$emit('countFunc', obj); // 分发事件到父组件 }, decrease() { // 类似的减法操作 }, }, }; </script> ``` 在这个例子中，子组件的按钮点击事件会触发`increase`或`decrease`方法，这些方法会触发`countFunc`事件并附带当前商品的索引信息。父组件通过监听`countFunc`事件来接收这些信息，并在`handleCountChange`方法中进行相应的业务处理。 总结起来，Vue2.0中的父子组件通信主要依赖于自定义事件和事件中心。这种方式使得组件间的通信更加明确，也更符合组件化的设计思想。通过这个实例，我们可以更好地理解和应用Vue2.0中的事件系统，从而在实际项目中构建更加复杂且可维护的组件结构。