在Vue.js中有一種使用event emitters通過父組件在兩個子組件之間進行通信的方法。在子組件中設置事件并在父組件中設置偵聽器時，響應式將通過父組件向下傳遞到嵌套組件。

雖然這是一個有價值的解決方案，但隨著項目的發(fā)展，它可能會變得笨拙。事件總線是一個 Vue.js 實例，它可以在一個組件中發(fā)出事件，然后直接偵聽并響應另一個組件中發(fā)出的事件——無需父組件的幫助。事件總線比發(fā)射器更高效，因為它需要更少的代碼來運行。

在本教程中，我們將在 Vue.js 項目中創(chuàng)建一個事件總線，以促進兩個組件之間通過私有通道進行通信。這通常稱為發(fā)布-訂閱方法。

(資料圖片)

這篇文章適合所有階段的開發(fā)人員，包括初學者。在閱讀本文之前，您應該已經(jīng)具備以下幾點：

# npm 6.xnpm create vite@latest event-bus-tutorial --template vue# npm 7+, extra double-dash is needed:npm create vite@latest event-bus-tutorial -- --template vue

cd event-bus-tutorialnpm install

在 Vue 2.x 中，Vue 實例可用于觸發(fā)通過事件發(fā)射器 API（$on、$off和$once） 強制附加的處理程序。

為了使用事件總線模式，你所要做的就是創(chuàng)建一個 Vue 構(gòu)造函數(shù)的新實例，將該實例分配給一個名為eventBus的常量變量，然后將其導出。這個實例充當事件總線，允許 Vue 應用程序中的不同組件相互通信：

// eventBus.jsconst eventBus = new Vue()export default eventBus

導入 eventBus 實例并在要接收事件的組件中，添加事件偵聽器：

// ChildComponent.vueimport eventBus from "./eventBus"export default {  mounted() {    // adding eventBus listener    eventBus.$on("custom-event", () => {      console.log("Custom event triggered!")    })  },  beforeDestroy() {    // removing eventBus listener    eventBus.$off("custom-event")  }}

導入eventBus實例并在要發(fā)送事件的組件中，添加事件發(fā)射器：

// ParentComponent.vueimport eventBus from "./eventBus"export default {  methods: {    sendCustomEvent() {      // sending the event      eventBus.$emit("custom-event")    }  }}

在 Vue 3 中，$on、$off和$once方法已從 Vue 實例中完全刪除。因此，為了使用事件總線模式，必須安裝外部事件發(fā)射器和偵聽器包，例如mitt。

使用以下命令安裝mitt包并開始提供應用程序：

npm install --save mittnpm run dev

main.js 打開位于目錄 src 中的文件，并修改其中的代碼，如下所示：

import { createApp } from "vue"import mitt from "mitt"import App from "./App.vue"const emitter = mitt()const app = createApp(App)app.config.globalProperties.emitter = emitterapp.mount("#app")

這段代碼通過創(chuàng)建一個發(fā)射器實例，使其通過 Vue 應用程序?qū)嵗衷L問，并將應用程序掛載到 DOM 中，將 mitt 事件發(fā)射器庫與 Vue 3 應用程序集成。這允許組件使用發(fā)射器發(fā)出和偵聽事件，而無需直接導入。

在我們的演示中，我們將創(chuàng)建兩個子組件，它們需要在不使用父組件作為中介的情況下相互通信。首先，在components目錄中創(chuàng)建一個名為Child1.vue的新文件，并將以下代碼塊粘貼到其中：

<script >export default {  name: "Child1",  data: () => ({    counter: 0,  }),  methods: {},};</script>

總體而言，此代碼呈現(xiàn)一個

<script>export default {  name: "Child2",  data: () => ({    counter: 0,  }),};</script>