vue中eventbus实现
Vue 中 EventBus 的实现方法
EventBus 是一种组件间通信的方式，适合非父子组件或跨层级组件传递数据。以下是具体实现方法：
创建 EventBus 实例
在项目中新建一个文件（如 eventBus.js），导出 Vue 实例作为事件总线：
import Vue from 'vue';
export const EventBus = new Vue();发送事件
在需要发送事件的组件中引入 EventBus，通过 $emit 触发事件：
import { EventBus } from './eventBus.js';
// 触发事件并传递数据
EventBus.$emit('eventName', data);接收事件
在需要接收事件的组件中引入 EventBus，通过 $on 监听事件：
import { EventBus } from './eventBus.js';
// 监听事件并处理数据
EventBus.$on('eventName', (data) => {
console.log('Received data:', data);
});移除事件监听
为避免内存泄漏，需要在组件销毁时移除事件监听：
import { EventBus } from './eventBus.js';
// 组件销毁时移除监听
beforeDestroy() {
EventBus.$off('eventName');
}全局 EventBus
若希望全局使用，可将 EventBus 挂载到 Vue 原型上（在 main.js 中）：
import Vue from 'vue';
Vue.prototype.$eventBus = new Vue();使用时直接通过 this.$eventBus 调用：
// 发送事件
this.$eventBus.$emit('eventName', data);
// 接收事件
this.$eventBus.$on('eventName', (data) => {
// 处理逻辑
});注意事项
- 命名冲突：事件名称建议使用模块化前缀（如
userModule:update）。 - 性能影响：频繁使用 EventBus 可能导致代码难以维护，复杂场景建议使用 Vuex。
- 内存泄漏：务必在组件销毁时移除监听。
通过以上方法，可以高效实现 Vue 组件间的松耦合通信。
