Vue2.0子组件同级通信：使用事件总线eventBus

"Vue2.0子同级组件之间数据交互方法主要依赖于事件总线(event bus)实现，通过创建一个新的Vue实例作为通信桥梁。在发送数据的组件中使用$emit触发自定义事件，接收数据的组件则通过$on监听相应事件。这种通信方式适用于同级或非父子关系的组件间通信。" 在Vue2.0中，当两个子组件处于同级且没有直接的父子关系时，它们之间的数据交互通常不通过props直接传递，而是利用事件系统来实现。这里介绍的方法是通过创建一个中央事件总线(event bus)，使得组件能够通过事件进行通信。 1. 创建中央事件总线 首先，在项目的`src/assets`目录下创建`eventBus.js`文件，内容为创建一个新的Vue实例，例如： ```javascript import Vue from 'vue'; export default new Vue(); ``` 这个新的Vue实例将作为一个全局的对象，用于组件间的通信。 2. 发送数据 在需要发送数据的组件中（例如`firstChild`组件），引入`eventBus`，然后在某个事件（如按钮点击）中使用`$emit`方法触发自定义事件，并传递数据： ```javascript methods: { sendMsg() { this.$eventBus.$emit('userDefinedEvent', '这是要传递的数据'); } } ``` 在这里，`$emit`方法用于触发事件`userDefinedEvent`，并将字符串参数传递给监听该事件的组件。 3. 接收数据 在接收数据的组件（如`secondChild`组件）中，同样引入`eventBus`，并在`mounted`生命周期钩子中使用`$on`方法监听自定义事件： ```javascript mounted() { this.$eventBus.$on('userDefinedEvent', (data) => { console.log('接收到的数据:', data); // 更新组件状态或者显示数据 }); } ``` `$on`方法用于监听事件`userDefinedEvent`，当事件触发时，回调函数会接收到传递的数据，并进行相应的处理。 4. 在父组件中注册子组件 在父组件（如`App.vue`）中，分别注册`firstChild`和`secondChild`组件，并在模板中插入对应的标签，使它们在页面上呈现。 通过这种方式，两个同级组件就可以实现数据的传递，而无需依赖父组件或使用复杂的Vuex状态管理。然而，这种方法仅适用于简单场景，如果应用变得复杂，推荐使用Vuex来集中管理组件间共享的状态，以保持代码的可维护性和可扩展性。 总结：Vue2.0中，子同级组件间的通信主要通过事件总线(event bus)实现，通过创建一个独立的Vue实例作为通信媒介，组件通过触发和监听自定义事件来传递和接收数据。这种方法简洁易懂，适用于轻量级的数据交互需求。但随着应用规模扩大，考虑使用Vuex等状态管理工具会更合适。