当前位置：首页 > news >正文

Vue 3 中的事件总线

news 2025/9/26 10:19:08

在 Vue 3 中，由于创建 Vue 实例的方式发生了变化，并且推荐使用 Composition API，事件总线的实现方式也与 Vue 2 有所不同。

一、Vue 3 事件总线的核心变化

在 Vue 2 中，我们通常 new Vue() 来创建事件总线。但在 Vue 3 中：

Vue 构造函数不再直接导出，取而代之的是 createApp。
Vue 实例不再是一个事件发射器，它移除了 $on, $off, 和 $once 方法。

因此，我们不能再用 new Vue() 来创建事件总线。

二、Vue 3 实现事件总线的推荐方案

有几种方式可以在 Vue 3 中实现事件总线模式，这里介绍最主流和推荐的两种。

方案一：使用第三方库 `mitt`（最推荐）

mitt 是一个小巧（约 200 bytes）、功能完整的的事件总线库，它不依赖 Vue，但可以完美地与 Vue 3 集成。这是目前 Vue 社区公认的最佳实践。

1. 安装 mitt

npm install mitt

2. 创建事件总线
创建一个单独的文件（如 event-bus.js）：

// event-bus.js
import mitt from 'mitt';// 创建一个 mitt 实例并导出
const emitter = mitt();export default emitter;

3. 在组件中使用

发布事件（发送消息）：
使用 emitter.emit(eventType, data)

<!-- PublisherComponent.vue -->
<template><button @click="sendMessage">发送消息</button>
</template><script setup>
import { ref } from 'vue';
import emitter from './event-bus.js'; // 导入事件总线const message = ref('Hello from Vue 3!');const sendMessage = () => {// 发布一个名为 'messageEvent' 的事件，并携带数据emitter.emit('messageEvent', message.value);// 也可以发布没有数据的事件// emitter.emit('someNotification');
};
</script>

订阅事件（接收消息）：
使用 emitter.on(eventType, callback)
关键点： 在 Composition API 的 setup 中，需要在 onMounted 生命周期中订阅，并在 onUnmounted 中取消订阅，以防止内存泄漏。

<!-- SubscriberComponent.vue -->
<template><div>收到消息: {{ receivedMessage }}</div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import emitter from './event-bus.js'; // 导入事件总线const receivedMessage = ref('');// 定义处理事件的函数
const handleMessage = (data) => {receivedMessage.value = data;console.log('收到数据:', data);
};// 组件挂载后订阅事件
onMounted(() => {emitter.on('messageEvent', handleMessage);
});// 组件卸载前取消订阅
onUnmounted(() => {emitter.off('messageEvent', handleMessage);
});
</script>

mitt 的其他常用 API：

emitter.all: 一个 Map，可以查看所有事件和处理函数。
emitter.off(eventType, handler): 移除特定事件的特定监听器。
emitter.emit(eventType): 触发事件，可不传数据。

方案二：使用 `provide` / `inject` 实现一个简单的事件总线

如果你不想引入第三方库，并且应用场景比较简单，可以利用 Vue 3 的 provide 和 inject 特性，在根组件提供一个响应式对象作为事件总线。

1. 在根组件（如 App.vue）提供事件总线

<!-- App.vue -->
<template><PublisherComponent /><SubscriberComponent />
</template><script setup>
import { ref, provide } from 'vue';
import PublisherComponent from './components/PublisherComponent.vue';
import SubscriberComponent from './components/SubscriberComponent.vue';// 1. 创建一个响应式对象来存储事件和监听器（简化版）
const eventBus = ref({});// 2. 创建事件总线的方法
const eventBusMethods = {$on(event, callback) {if (!eventBus.value[event]) {eventBus.value[event] = [];}eventBus.value[event].push(callback);},$emit(event, ...args) {if (eventBus.value[event]) {eventBus.value[event].forEach(callback => callback(...args));}},// 可以自行实现 $off 等功能
};// 3. 将事件总线方法提供给所有子组件
provide('eventBus', eventBusMethods);
</script>

2. 在子组件中注入并使用

发布者组件：

<!-- PublisherComponent.vue -->
<template><button @click="$emitMessage">发送</button>
</template><script setup>
import { inject } from 'vue';// 注入事件总线
const eventBus = inject('eventBus');const $emitMessage = () => {eventBus.$emit('myEvent', '一些数据');
};
</script>

订阅者组件：

<!-- SubscriberComponent.vue -->
<template><div>消息: {{ message }}</div>
</template><script setup>
import { ref, inject, onMounted, onUnmounted } from 'vue';// 注入事件总线
const eventBus = inject('eventBus');
const message = ref('');const handleEvent = (data) => {message.value = data;
};onMounted(() => {eventBus.$on('myEvent', handleEvent);
});// 注意：这个简易实现需要更复杂的逻辑来实现 $off，这里省略了取消订阅
// onUnmounted(() => { ... });
</script>

三、Vue 3 事件总线 vs. 状态管理工具（如 Pinia）

特性	事件总线（如 mitt）	状态管理（如 Pinia）
目的	组件间通信，传递事件和消息	全局状态管理，集中管理数据
数据流	单向或双向，通常是“一发一收”	单向数据流，状态可预测
数据持久性	事件触发后即消失，不存储数据	数据存储在 Store 中，是持久的
适用场景	简单的、一次性的通知（如显示通知、表单提交完成）	复杂的、需要共享和持久化的数据（如用户登录信息、购物车）
调试	相对困难，事件是匿名的	非常方便，有 DevTools 支持

总结与建议

对于 Vue 3，强烈推荐使用 mitt 来实现事件总线。它轻量、简单且完美契合 Vue 3 的理念。
将事件总线的创建逻辑放在一个独立的模块中（如 event-bus.js），便于管理和维护。
务必记住在组件卸载时（onUnmounted）取消事件监听，这是避免内存泄漏的关键。
如果应用的数据流变得非常复杂，需要多个组件共享和修改同一份数据，请考虑使用 Pinia 这类专门的状态管理库，而不是滥用事件总线。事件总线更适合处理行为和通知，而非管理状态。