Vue EventBus

### Vue.js 中 EventBus 的使用方法

#### 创建 Event Bus 实例
为了创建一个用于组件间通信的事件总线，在 `eventBus.js` 文件中定义一个新的 Vue 实例作为全局事件中心：

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

此实例可以在整个应用程序的不同部分之间共享，从而允许松散耦合的组件相互通信[^1]。

#### 发送自定义事件
当某个特定条件满足时，可以通过 `$emit()` 方法触发自定义事件，并传递数据给其他监听该事件的地方。例如：

// 组件A.vue 或者任意位置
import { EventBus } from './eventBus';

methods: {
  sendDataToOtherComponents() {
    let message = "Hello from Component A!";
    EventBus.$emit('message-sent', message);
  }
}

这会广播名为 `'message-sent'` 的消息到所有订阅它的地方[^2]。

#### 接收并处理事件
接收方通过调用 `$on()` 来注册回调函数以响应指定类型的事件。比如在一个不同的组件里这样做：

// 组件B.vue 或者任意位置
import { EventBus } from './eventBus';

created () {
  EventBus.$on('message-sent', (msg) => {
    console.log(msg); // 输出："Hello from Component A!"
  });
}

每当 `'message-sent'` 被发出时，这里设置好的处理器就会被执行[^3]。

#### 移除事件监听器
为了避免内存泄漏或其他潜在问题，不再需要某些事件监听的时候应该及时解除绑定。可以利用 `$off()` 方法做到这一点：

// 停止监听单个事件
EventBus.$off('decreased');

// 如果有参数，则停止带有这些参数的第一个匹配项
EventBus.$off('decreased', handlerFunction);

// 清除所有的事件监听
EventBus.$off();

以上就是关于如何在 Vue 应用程序内实施简单的跨组件通讯机制——即所谓的 “事件总线模式”。对于小型项目来说，这种方法简单易懂；但对于大型复杂的SPA而言，建议考虑更正式的状态管理模式如 Vuex[^5]。