事件总线（EventBus）工作原理

文章索引

<template>
  <div>
    <event-bus-a />
    <event-bus-b />
  </div>
</template>

<script setup lang="ts">
  import EventBusA from './components/EventBusA.vue'
  import EventBusB from './components/EventBusB.vue'
</script>

<div>

<event-bus-a />

<event-bus-b />

</div>

</template>

import EventBusA from './components/EventBusA.vue'

import EventBusB from './components/EventBusB.vue'

</script>

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

1. EventBus的基本概念

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

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

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

2. 为什么可以通信？

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

（1）共享的 eventBus 实例

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

  // 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();

// 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 中导入：

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

// EventBusA.vue

import eventBus from '../eventBus';

eventBus.emit('message', 'Hello from A');

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

// 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）解耦组件

在你的 <template> 中，EventBusA 和 EventBusB 是兄弟组件，它们没有直接的父子关系。
Vue 中，兄弟组件通常不能直接通信，必须通过父组件传递 props 或事件。但使用 eventBus，它们可以绕过这种限制，直接通过共享的事件总线交互。

3. 示例代码分析

假设你的子组件实现如下：

EventBusA.vue

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script setup lang="ts">
import eventBus from '../eventBus';

const sendMessage = () => {
  eventBus.emit('message', 'Hello from EventBusA!');
};
</script>

<button @click="sendMessage">Send Message</button>

</template>

import eventBus from '../eventBus';

const sendMessage = () => {

eventBus.emit('message', 'Hello from EventBusA!');

};

</script>

EventBusB.vue

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import eventBus from '../eventBus';

const message = ref('');

onMounted(() => {
  eventBus.on('message', (msg: string) => {
    message.value = msg;
  });
});
</script>

<div>{{ message }}</div>

</template>

import { ref, onMounted } from 'vue';

import eventBus from '../eventBus';

const message = ref('');

onMounted(() => {

eventBus.on('message', (msg: string) => {

message.value = msg;

});

</script>

父组件（你的代码）

<template>
  <div>
    <event-bus-a />
    <event-bus-b />
  </div>
</template>

<script setup lang="ts">
import EventBusA from './components/EventBusA.vue';
import EventBusB from './components/EventBusB.vue';
</script>

<div>

<event-bus-a />

<event-bus-b />

</div>

</template>

import EventBusA from './components/EventBusA.vue';

import EventBusB from './components/EventBusB.vue';

</script>

执行流程

用户点击 EventBusA 中的按钮。
EventBusA 调用 eventBus.emit('message', 'Hello from EventBusA!')。
EventBusB 在挂载时通过 eventBus.on('message', ...) 监听了 message 事件。
eventBus 将事件分发给所有订阅者，EventBusB 的回调执行，更新 message 的值。
EventBusB 的模板显示 “Hello from EventBusA!”。

4. 为什么有效？

单一实例：eventBus 是通过模块导入的同一个对象，所有的 emit 和 on 操作都作用于同一个事件存储（events 对象）。
全局可访问：即使 EventBusA 和 EventBusB 是独立的组件，它们通过共享的 eventBus 建立了联系。
事件驱动：事件总线不关心组件层级或位置，只要事件名匹配，就能通信。

5. 注意事项

尽管 eventBus 很方便，但也有潜在问题：

命名冲突：如果多个地方使用相同的事件名（比如 'message'），可能会触发意外行为。
难以调试：事件流不像 props 或 Vuex 那样直观，多了之后容易混乱。
清理问题：如果不及时调用 off 移除监听器，可能导致内存泄漏，尤其是在组件销毁时。

在 Vue 3 中，官方不再推荐全局 eventBus，而是建议使用：

Pinia（状态管理库）
props 和 emit（父子通信）
provide/inject（跨层级通信）

6. 总结

两个组件通过 eventBus 通信的原因是：

它们共享同一个 eventBus 实例。
一个组件发布事件，另一个组件订阅事件，事件总线负责分发。
这种机制绕过了组件层级的限制，实现了兄弟组件间的直接通信。