实现Vue事件总线
使用 EventBus 实现全局事件通信
在 Vue 中，可以通过创建一个独立的 Vue 实例作为事件总线（EventBus）来实现组件间的通信。这种方法适用于非父子组件或跨层级组件之间的通信。
创建 EventBus 实例
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();发送事件
在需要发送事件的组件中，通过 $emit 方法触发事件并传递数据。
// ComponentA.vue
import { EventBus } from './event-bus.js';
EventBus.$emit('event-name', payload);event-name是自定义的事件名称。payload是要传递的数据（可选）。
监听事件
在需要接收事件的组件中，通过 $on 方法监听事件并处理数据。
// ComponentB.vue
import { EventBus } from './event-bus.js';
EventBus.$on('event-name', (payload) => {
console.log('Received data:', payload);
});移除事件监听
为避免内存泄漏，需要在组件销毁时移除事件监听。
// ComponentB.vue
import { EventBus } from './event-bus.js';
EventBus.$off('event-name');一次性事件监听
如果只需要监听一次事件，可以使用 $once 方法。
EventBus.$once('event-name', (payload) => {
console.log('This will only trigger once:', payload);
});注意事项
- 命名冲突：确保事件名称唯一，避免重复触发。
- 内存泄漏：组件销毁时及时移除监听。
- 替代方案：对于大型项目，建议使用 Vuex 或 Pinia 进行状态管理。
通过 EventBus 可以轻松实现跨组件通信，但需注意合理使用以避免代码耦合。
