vue中eventbus实现
Vue 中 EventBus 的实现
EventBus 是一种跨组件通信的机制，适用于非父子关系的组件间传递数据。以下是具体实现方法：
创建 EventBus
新建一个独立的 Vue 实例作为事件中心：
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();发送事件
在需要发送数据的组件中触发事件：
import { EventBus } from './event-bus.js';
// 触发事件并传递数据
EventBus.$emit('eventName', payloadData);接收事件
在需要接收数据的组件中监听事件：
import { EventBus } from './event-bus.js';
// 监听事件
EventBus.$on('eventName', (payloadData) => {
console.log('Received data:', payloadData);
});移除监听
为避免内存泄漏，在组件销毁时移除事件监听：
// 在组件生命周期中
beforeDestroy() {
EventBus.$off('eventName');
}注意事项
- EventBus 适合中小型项目，大型项目建议使用 Vuex
- 事件命名需保持唯一性，避免冲突
- 及时清理无用的事件监听
- 传递的数据应为不可变对象，避免直接修改
全局注册方式（可选）
可在 main.js 中将 EventBus 挂载到 Vue 原型上：
// main.js
import { EventBus } from './event-bus';
Vue.prototype.$eventBus = EventBus;
// 组件中使用
this.$eventBus.$emit('eventName');这种实现方式提供了组件间松耦合的通信能力，但需谨慎管理事件的生命周期。
