vue使用EventBus进行跨组件通信

Vue中的EventBus，又称为事件总线，是一种常用的通信模式，它允许在Vue应用程序的不同组件之间进行松耦合的通信，尤其是对于那些没有直接父子关系的组件间的通信非常有用。EventBus基于Vue的自定义事件系统实现，工作原理遵循发布-订阅模式。

如何使用EventBus：

1. 初始化EventBus：
   首先，你需要创建一个EventBus实例。这通常在一个单独的文件中完成，然后在需要使用EventBus的组件中导入这个实例。

   // eventBus.js
   import Vue from 'vue';
   export const EventBus = new Vue();
   

2. 发布事件（发送消息）：
   在一个组件中，你可以使用EventBus.$emit方法来触发一个事件，并传递数据。

   // 组件A
   import { EventBus } from './eventBus.js';
   EventBus.$emit('eventName', eventData);
   

3. 订阅事件（接收消息）：
   在另一个组件中，使用EventBus.$on方法来监听这个事件，并定义当事件触发时应执行的回调函数。

   // 组件B
   import { EventBus } from './eventBus.js';
   created() {
     EventBus.$on('eventName', this.handleEventData);
   },
   methods: {
     handleEventData(eventData) {
       console.log('Received data:', eventData);
     }
   },
   beforeDestroy() {
     // 清理事件监听，防止内存泄漏
     EventBus.$off('eventName', this.handleEventData);
   }
   

注意点：

• 避免滥用：虽然EventBus提供了便捷的跨组件通信方式，但过度使用可能导致代码结构混乱，难以维护。对于复杂的通信逻辑，考虑使用 Vuex 状态管理器。
• 内存泄漏：记得在组件销毁时移除不必要的事件监听器，以防止内存泄漏。可以使用beforeDestroy或destroyed生命周期钩子来做这件事。
• 命名规范：为事件命名时，应保持清晰且具有描述性，以避免事件名冲突和混淆。

EventBus提供了一种简单的方式来解耦组件间通信，适用于小型到中型项目，或者是在不希望引入 Vuex 等重型状态管理方案时的临时解决方案。