在復雜的前端應用中，組件之間的通信往往需要一種靈活且解耦的方式。傳統的 Vue 2 中，我們常使用全局事件總線來實現這種通信，但在 Vue 3 中，由于架構和 API 的變化，全局事件總線并非內置方案。本文將為你詳細介紹如何在 Vue 3 中實現事件總線，并通過代碼示例展示基于 mitt 的輕量級事件總線實現，以及自定義實現的方法。

---

為什么需要事件總線？

在組件間通信場景中，當組件之間沒有直接的父子關系時，我們可以通過事件總線來實現數據傳遞。事件總線能夠實現以下效果：

• 解耦合通信： 發送者與接收者無需相互依賴，只需關注事件名稱與數據內容。
• 靈活擴展： 對于簡單的跨組件通信需求，不必引入狀態管理庫（如 Vuex/Pinia）。
• 簡化代碼邏輯： 通過統一的事件中轉，便于維護與調試。

---

使用 mitt 實現事件總線

mitt 是一個僅 200 行左右代碼的極簡事件觸發器，非常適合用作 Vue 3 的事件總線。

1. 安裝 mitt

首先，通過 npm 或 yarn 安裝 mitt：

# 使用 npm 安裝
npm install mitt# 或者使用 yarn
yarn add mitt

2. 創建事件總線

在項目中創建一個單獨的事件總線文件，如 eventBus.js：

// eventBus.js
import mitt from 'mitt'const emitter = mitt()export default emitter

3. 在組件中使用事件總線

發送端組件（例如 ComponentA.vue）

<template><div><h2>組件 A</h2><button @click="sendMessage">發送消息</button></div>
</template><script setup>
import emitter from '@/eventBus'  // 根據項目實際路徑引入const sendMessage = () => {// 觸發事件 'custom-event'，傳遞消息數據emitter.emit('custom-event', 'Hello from Component A')
}
</script>

接收端組件（例如 ComponentB.vue）

<template><div><h2>組件 B</h2><p>收到的消息：{{ message }}</p></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import emitter from '@/eventBus'const message = ref('')// 定義事件處理函數
const updateMessage = (payload) => {message.value = payload
}onMounted(() => {// 監聽 'custom-event' 事件emitter.on('custom-event', updateMessage)
})onUnmounted(() => {// 組件銷毀時注銷事件監聽，避免內存泄漏emitter.off('custom-event', updateMessage)
})
</script>

通過上述代碼示例，我們實現了組件間的簡單通信：當 ComponentA 中點擊按鈕時，會通過事件總線發送消息；而 ComponentB 監聽到該消息后，自動更新顯示的內容。

---

自定義實現事件總線

除了使用 mitt，還可以基于 Vue 3 的響應式 API 自行構造一個簡單的事件總線。以下為一個簡單的實現示例：

// customEventBus.js
import { reactive } from 'vue'const eventBus = reactive({events: {},// 監聽事件on(event, callback) {if (!this.events[event]) {this.events[event] = []}this.events[event].push(callback)},// 觸發事件emit(event, payload) {if (this.events[event]) {this.events[event].forEach(callback => callback(payload))}},// 注銷事件off(event, callback) {if (this.events[event]) {this.events[event] = this.events[event].filter(cb => cb !== callback)}}
})export default eventBus

使用方法與 mitt 類似，在組件中引入 customEventBus，進行事件監聽與觸發即可。

---

總結

本文介紹了 Vue 3 中實現事件總線的兩種方式：

• 使用輕量級庫 mitt 實現高效解耦的事件通信；
• 基于 Vue 3 響應式 API 自定義一個簡單的事件總線。

事件總線對于非父子組件間的通信場景十分適用，但在大型應用中，建議結合狀態管理方案（如 Pinia 或 Vuex）進行更系統化的數據管理。希望這篇文章能幫助你更好地理解并應用 Vue 3 中的事件總線，為組件間通信搭建高效橋梁！

---

快試試以上代碼示例，體驗 Vue 3 中事件總線帶來的靈活與便捷吧！