eventBus 事件中心管理组件间的通信

EventBus（事件总线）是Vue中用于实现非父子组件间通信的轻量级方案，通过一个中央Vue实例管理事件的发布与订阅。

一、基本使用步骤

1.创建EventBus实例

推荐单独创建文件（如event-bus.js）导出实例，避免全局污染：

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

2.发送事件（发布）

在需要通信的组件中通过$emit触发事件，可传递数据：

import { EventBus } from './event-bus.js';
export default {
  methods: {
    sendData() {
      EventBus.$emit('event-name', { key: 'value' }); // 事件名 + 数据
    }
  }
};

2.接收事件（订阅）

在目标组件中通过$on监听事件，处理数据：

import { EventBus } from './event-bus.js';
export default {
  mounted() {
    EventBus.$on('event-name', (data) => {
      console.log('接收数据:', data); // 处理数据
    });
  }
};

3.移除监听（避免内存泄漏）

在组件销毁前（beforeDestroy或beforeUnmount钩子）清理监听：

beforeDestroy() {
  EventBus.$off('event-name'); // 移除指定事件
  // EventBus.$off(); // 移除所有事件（无参数）
}