事件总线（EventBus）工作原理

Default

1234567891011

我来解释为什么两个组件通过 eventBus 可以实现通信。代码展示了一个父组件中包含两个子组件（EventBusA 和 EventBusB），它们通过 eventBus 进行通信。这种机制的核心在于 事件总线（Event Bus） 的工作原理，以及它如何在组件间共享数据或触发行为。

1. EventBus的基本概念

EventBus 是一个集中式的事件管理工具，通常是一个全局或模块化的对象，允许不同组件通过订阅（监听）和发布（触发）事件来进行通信。它的工作方式类似于一个“广播站”：

一个组件发布事件（emit）。

另一个组件订阅事件（on），接收到事件后执行相应逻辑。

在例子中，EventBusA 和 EventBusB 能够通信，是因为它们共享同一个 eventBus 实例，并且通过这个实例发送和接收事件。

2. 为什么可以通信？

要理解为什么两个组件可以通过 eventBus 通信，我们需要看几个关键点：

（1）共享的 eventBus 实例

如果 EventBusA 和 EventBusB 使用的是同一个 eventBus 对象（例如通过导入同一个模块或访问全局变量），那么它们就有了共同的通信渠道。

例如，假设 eventBus 是这样定义的：

Default

12345678910111213141516171819

// eventBus.ts class EventBus { events: { [key: string]: Function[] } = {}; on(eventName: string, callback: Function) { if (!this.events[eventName]) this.events[eventName] = []; this.events[eventName].push(callback); } emit(eventName: string, data?: any) { if (this.events[eventName]) { this.events[eventName].forEach(callback => callback(data)); } } off(eventName: string, callback: Function) { if (!this.events[eventName]) return; this.events[eventName] = this.events[eventName].filter(cb => cb !== callback); if (this.events[eventName].length === 0) delete this.events[eventName]; } } export default new EventBus();

然后在 EventBusA 和 EventBusB 中导入：

Default

123

// EventBusA.vue import eventBus from '../eventBus'; eventBus.emit('message', 'Hello from A');

Default

123

// EventBusB.vue import eventBus from '../eventBus'; eventBus.on('message', (msg) => console.log(msg));

因为 eventBus 是同一个实例（通过模块导出的是单例），EventBusA 发出的事件会被 EventBusB 监听到。

（2）发布-订阅模式

EventBusA 可能通过 eventBus.emit('someEvent', data) 发布一个事件。

EventBusB 通过 eventBus.on('someEvent', callback) 订阅了同一个事件名。

当事件触发时，EventBusB 的回调函数会被调用，接收到 EventBusA 发送的数据。

（3）解耦组件

在你的