vue 3 中推荐使用 mitt 实现事件总线，因其轻量（200 字节）、零依赖、typescript 友好，且能安全适配 setup 的生命周期（onmounted/onbeforeunmount 自动清理监听器），解决跨组件（含兄弟、非父子）通信问题。

Vue 3 的 setup 函数本身不支持 Vue 2 风格的全局事件总线（即基于 new Vue() 实例的 $on/$off），因为这些 API 已在 Vue 3 中被移除。但你仍可在组合式函数中实现类似“事件总线”的跨组件通信，关键是选用兼容 Vue 3 的轻量级事件发射器，并在 setup 中正确注册监听与清理逻辑。

用 mitt 或 tiny-emitter 替代 Vue 实例总线

推荐使用 mitt（最常用）或 tiny-emitter 创建一个纯 JavaScript 事件中心。它不依赖 Vue 实例，天然适配组合式 API：

• 安装：npm install mitt
• 创建事件总线文件（如 eventBus.js）：
    import mitt from 'mitt';
    export const eventBus = mitt();
• 在组合式函数中导入并使用：
  监听事件需在 onMounted 中注册，移除监听必须在 onBeforeUnmount 中执行，避免内存泄漏。

在 setup 中安全监听事件（含自动清理）

直接在 setup 里调用 eventBus.on 是可行的，但必须手动绑定和解绑。更稳妥的方式是封装成可复用的组合式函数，例如：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 定义 useEventBus 组合函数：
    import { onMounted, onBeforeUnmount } from 'vue';
    import { eventBus } from './eventBus';
    
    export function useEventBus(event, callback) {
      onMounted(() => eventBus.on(event, callback));
      onBeforeUnmount(() => eventBus.off(event, callback));
    }
• 在组件中使用：
    import { useEventBus } from './composables/useEventBus';
    import { ref } from 'vue';
    
    export default {
      setup() {
        const msg = ref('');
        useEventBus('update-message', (data) => {
          msg.value = data;
        });
        return { msg };
      }
    }
    

触发事件的位置不受限制

任何地方（包括其他组合式函数、setup、methods 或普通 JS 模块）都可以调用 eventBus.emit('xxx', payload) 发送事件，无需挂载或上下文依赖。例如：

• 在某个按钮点击逻辑中：
    import { eventBus } from './eventBus';
    function handleClick() {
      eventBus.emit('update-message', 'New content from button');
    }
• 该事件会立即被所有已注册的 useEventBus('update-message', ...) 监听器响应。

为什么不用 provide/inject 替代？

provide/inject 适合**有明确祖先-后代关系**的组件通信；而事件总线适用于**无层级关联、松耦合、广播式**场景（如全局通知、跨路由模块通信）。两者定位不同，不可简单互换。若项目已引入 Pinia，多数全局状态变更建议走 store + actions，仅临时性、非状态类通知才考虑事件总线。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！