实现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 可以轻松实现跨组件通信，但需注意合理使用以避免代码耦合。