Vue2.0父子组件事件通信：实例解析与代码演示

"Vue2.0父组件与子组件之间的事件发射与接收实例代码" 在Vue2.0中，为了实现父组件与子组件之间的通信，不再使用已废弃的`$dispatch`和`$broadcast`方法，而是采用了事件中心（Event Bus）的方式来传递消息。事件中心是一个独立的Vue实例，允许任何组件通过它来触发和监听事件，从而实现了跨层级的通信。 首先，我们需要创建一个全局的事件中心。在项目的初始化阶段，可以在`data`中添加一个名为`eventHub`的空Vue实例： ```javascript new Vue({ data: { // ... eventHub: new Vue() }, // ... }) ``` 在子组件中，当需要触发事件时，例如点击加号按钮，可以使用`eventHub.$emit`来派发事件。假设我们有一个加号按钮，用于增加商品的数量： ```javascript methods: { increaseQuantity(itemIndex, parentIndex) { this.eventHub.$emit('countChange', { count: 1, index: itemIndex, parent: parentIndex }); } } ``` 这里的`increaseQuantity`方法会在点击时派发一个`countChange`事件，并附带当前商品的索引值以及其所在大类的索引。 在父组件中，我们需要监听这个事件并作出响应。可以使用`eventHub.$on`来注册事件监听器： ```javascript created() { this.eventHub.$on('countChange', this.handleCountChange); }, methods: { handleCountChange(obj) { console.log(obj); // 输出：Object {count: 1, index: 0, parent: 0} // 根据obj更新对应的商品数量 } } ``` `handleCountChange`方法会在接收到`countChange`事件时被调用，参数`obj`包含了子组件传递过来的信息，如商品数量和位置信息。 这样，当用户点击子组件的加号按钮时，事件会被发送到事件中心，父组件监听到事件后执行相应的逻辑，从而实现了父组件和子组件之间的通信。 总结来说，Vue2.0中通过事件中心进行父组件与子组件通信的关键步骤包括： 1. 创建一个全局的事件中心（Event Bus）。 2. 子组件使用`$emit`派发事件，附带需要传递的数据。 3. 父组件使用`$on`监听事件，并定义响应函数处理接收到的数据。 这种通信方式灵活且不局限于父子关系，适用于任意两个需要通信的组件。不过，当应用规模增大时，过多的全局事件可能会导致代码难以维护，此时应考虑使用Vuex等状态管理库来组织和管理组件间的通信。