在Vue.js中有一種使用event emitters通過(guò)父組件在兩個(gè)子組件之間進(jìn)行通信的方法。在子組件中設(shè)置事件并在父組件中設(shè)置偵聽器時(shí)，響應(yīng)式將通過(guò)父組件向下傳遞到嵌套組件。

雖然這是一個(gè)有價(jià)值的解決方案，但隨著項(xiàng)目的發(fā)展，它可能會(huì)變得笨拙。事件總線是一個(gè) Vue.js 實(shí)例，它可以在一個(gè)組件中發(fā)出事件，然后直接偵聽并響應(yīng)另一個(gè)組件中發(fā)出的事件——無(wú)需父組件的幫助。事件總線比發(fā)射器更高效，因?yàn)樗枰俚拇a來(lái)運(yùn)行。

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

先決條件

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

• 已安裝版本 14.18+ 及更高版本的Node.js。您可以通過(guò)在終端/命令提示符下運(yùn)行以下命令來(lái)驗(yàn)證您是否具有此版本： node -v
• 安裝了 npm 版本 6.x 及更高版本。在終端中使用以下命令驗(yàn)證安裝的版本： npm -v
• Visual Studio Code Editor 或類似的代碼編輯器
• 運(yùn)行以下命令來(lái)搭建 Vite 和 Vue 項(xiàng)目的基架：

# npm 6.x
npm create vite@latest event-bus-tutorial --template vue

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

• 導(dǎo)航到 event-bus-tutorial 目錄并使用 npm 安裝所需的依賴項(xiàng)：

cd event-bus-tutorial
npm install

在 Vue 2 中使用事件總線模式

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

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

// eventBus.js
const eventBus = new Vue()
export default eventBus

導(dǎo)入 eventBus 實(shí)例并在要接收事件的組件中，添加事件偵聽器：

// ChildComponent.vue
import 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')
  }
}

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

// ParentComponent.vue
import eventBus from './eventBus'

export default {
  methods: {
    sendCustomEvent() {
      // sending the event
      eventBus.$emit('custom-event')
    }
  }
}

Vue 3 中的事件總線入門

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

使用以下命令安裝 mitt 包并開始提供應(yīng)用程序：

npm install --save mitt
npm 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 = emitter
app.mount('#app')

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

創(chuàng)建我們的子組件

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

<template>
  <div>
    <button>Increment</button>
  </div>
</template>

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

<style scoped>
button {
  margin: 4rem 0 0;
  padding: 1rem;
  background-color: #0d6efd;
  color: white;
  border-radius: 1rem;
  font-size: 2rem;
}
</style>

總體而言，此代碼呈現(xiàn)一個(gè) <div> 包含樣式的 <button>。該組件還具有內(nèi)部數(shù)據(jù)屬性counter 設(shè)置為0和空methods屬性。

在components目錄中創(chuàng)建一個(gè)名為Child2.vue的新文件，并在其中粘貼以下代碼塊：

<template>
  <div>
    <h1>{{ counter }}</h1>
  </div>
</template>

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

<style scoped>
h1 {
  margin: 5rem 0 0;
  font-size: 10.5rem;
}
</style>

這個(gè) Vue 組件渲染一個(gè) <div> 包含樣式標(biāo)題 <h1> 的組件。該 counter 值動(dòng)態(tài)顯示在標(biāo)題中。

現(xiàn)在，轉(zhuǎn)到您的App.vue文件并將其整個(gè)代碼替換為以下內(nèi)容：

<template>
  <div id="app">
    <Child2 />
    <Child1 />
  </div>
</template>
<script>
import Child1 from "./components/Child1.vue";
import Child2 from "./components/Child2.vue";
export default {
  name: "app",
  components: {
    Child1,
    Child2,
  },
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 5rem;
}
</style>

在 App.vue 組件內(nèi)部，代碼導(dǎo)入并呈現(xiàn)樣式化的父 div 中的 Child1和Child2 組件。

設(shè)置事件

現(xiàn)在，兩個(gè)組件已準(zhǔn)備就緒，您可以在組件中偵聽 Child2 事件時(shí)，通過(guò)在 Child1 組件中發(fā)出來(lái)設(shè)置事件。打開文件 Child1.vue 并將以下代碼塊復(fù)制到其中：

<template>
  <div>
    <button v-on:click="sendEvent">Increment</button>
  </div>
</template>

<script >
export default {
  name: "Child1",
  data: () => ({
    counter: 0,
  }),
  methods: {
    sendEvent() {
      this.counter += 1;
      this.emitter.emit("increment", { msg: this.counter });
    },
  },
};
</script>

<style scoped>
button {
  margin: 4rem 0 0;
  padding: 1rem;
  background-color: #0d6efd;
  color: white;
  border-radius: 1rem;
  font-size: 2rem;
}
</style>

在這里，onclick事件偵聽器被添加到 button 元素中。觸發(fā)此事件時(shí)，將調(diào)用名為 sendEvent() 的方法。

該方法 sendEvent() 將計(jì)數(shù)器值遞增 1，并使用全局事件發(fā)射器向任何父組件或同級(jí)組件發(fā)出具有更新 counter 值的事件 increment 。

監(jiān)聽和響應(yīng)事件

設(shè)置事件后，我們需要讓第二個(gè)組件偵聽并響應(yīng)事件。打開文件 Child2.vue 并復(fù)制到以下代碼塊中：

<template>
  <div>
    <h1>{{ counter }}</h1>
  </div>
</template>

<script>
export default {
  name: "Child2",
  data: () => ({
    counter: 0,
  }),
  mounted() {
    this.emitter.on("increment", (data) => {
      this.counter = data.msg;
    });
  },
};
</script>

<style scoped>
h1 {
  margin: 5rem 0 0;
  font-size: 10.5rem;
}
</style>

該代碼使用mounted生命周期掛鉤在應(yīng)用程序掛載到 DOM 上時(shí)初始化偵聽過(guò)程。

該emitter.on語(yǔ)句現(xiàn)在正在偵聽 increment 事件，向下傳遞data參數(shù)，并將其設(shè)置為新計(jì)數(shù)器：

單擊組件上的“Increment”按鈕時(shí)， increment 事件將與更新 counter 的值一起發(fā)送到 Child2和 Child1 組件。

Vue.js中事件總線的當(dāng)前狀態(tài)

在大多數(shù)情況下，不建議使用全局事件總線來(lái)促進(jìn)組件之間的通信。雖然它最初似乎是最簡(jiǎn)單的解決方案，但隨著時(shí)間的推移，它經(jīng)常導(dǎo)致重大的維護(hù)挑戰(zhàn)。

根據(jù)具體情況，Vue 開發(fā)團(tuán)隊(duì)推薦了幾種替代方法，而不是依賴事件總線：

• 優(yōu)先使用 props 和事件作為父組件和子組件之間通信的主要方式。如有必要，兄弟姐妹可以通過(guò)其共同的父母進(jìn)行交流
• 使用provide/inject允許組件及其插槽內(nèi)容之間的通信。這對(duì)于始終一起使用的緊密耦合組件特別有用
• provide/inject還可以促進(jìn)組件層次結(jié)構(gòu)中相距甚遠(yuǎn)的組件之間的通信。它可以幫助消除對(duì)props傳遞過(guò)深的需求，其中props通過(guò)多個(gè)級(jí)別的組件向下傳遞，而這些組件本身不需要這些props本身。
• 為避免props傳遞過(guò)深，請(qǐng)考慮重構(gòu)代碼庫(kù)以利用slot。如果中間組件不需要某些props，則可能表明存在責(zé)任分離問(wèn)題。在該組件中引入插槽使父組件能夠直接提供內(nèi)容，從而允許傳遞 props 而不涉及中間組件
• 像 Pinia 這樣的全局狀態(tài)管理庫(kù)可用于跨組件管理全局狀態(tài)。這些庫(kù)提供了一種集中的狀態(tài)管理方法，允許組件訪問(wèn)和修改共享狀態(tài)，而無(wú)需顯式傳遞 prop

總結(jié)

這是對(duì) Vue.js 中事件總線的介紹。事件總線充當(dāng)組件之間易于實(shí)現(xiàn)的獨(dú)立通信，無(wú)需通過(guò)中央組件或父組件。

雖然事件總線最初似乎是組件間通信的便捷方法，但建議探索替代選項(xiàng)，例如provide/inject或全局狀態(tài)管理。這些替代方案為促進(jìn)組件之間的通信提供了更強(qiáng)大且可維護(hù)的解決方案。