全局事件匯流排：Vue中實現組件間通信的利器

一、全局事件匯流排是什麼

全局事件匯流排是Vue框架提供的一種組件間通信方式。它可以讓這些組件在沒有直接父子關係的情況下相互傳遞信息，適用於非父子組件之間的通信。

二、全局事件匯流排的使用

1. 全局事件匯流排使用

全局事件匯流排可以通過創建一個專為事件處理而生的Vue實例來實現。這個Vue實例被用作中央事件匯流排，任何組件都可以使用它的實例方法來訂閱或者發布事件。

const EventBus = new Vue()
export default EventBus

在Vue實例組件中可以使用EventBus.$emit()來觸發事件，而其他Vue實例組件中可以使用EventBus.$on()來訂閱事件。

// 觸發事件
EventBus.$emit('edit', this.id)

// 訂閱事件
EventBus.$on('edit', id => {
  this.editingId = id
})

2. 全局事件匯流排和Vuex

全局事件匯流排和Vuex都提供了組件之間交互的方式，而Vuex主要解決了大型單頁應用中狀態的管理，而全局事件匯流排可以實現簡單的組件之間的通信。

3. 全局事件匯流排on

全局事件匯流排的on方法是用來訂閱事件的。當這個事件被觸發時，事件處理程序會被調用。on方法的第一個參數是事件名稱，第二個參數是回調函數。

// 訂閱事件
EventBus.$on('title-click', event => {
  console.log(event.target)
})

4. 全局事件匯流排off

off方法用來取消訂閱事件。它需要兩個參數：事件名稱和回調函數。只有事件名稱和回調函數都匹配才會被取消。

const titleClickHandler = event => {
  console.log(event.target)
}
// 訂閱事件
EventBus.$on('title-click', titleClickHandler)

// 取消訂閱事件
EventBus.$off('title-click', titleClickHandler)

三、全局事件匯流排的原理

全局事件匯流排的運作原理與DOM事件相似。全局事件匯流排的監聽器保存在Vue實例的_events屬性中。視圖組件中的$emit方法會向這個實例的監聽器發送事件。實現了事件的觸發和訂閱。

四、Vue3全局事件匯流排

在Vue3之後，由於全局事件匯流排Vue實例中的_$emit和_$on私有屬性，已經無法訪問。因此，在Vue3之後，需要使用Vue3 Composition API在全局狀態下進行跨組件通信。

import { reactive, readonly } from 'vue'

const state = reactive({
  message: 'Hello from EventBus in Vue3!'
})

function updateMessage(msg) {
  state.message = msg
}

export default {
  state: readonly(state),
  updateMessage
}

五、全局事件匯流排安裝

全局事件匯流排是一個Vue插件，因此它可以通過Vue.use()方法來安裝。

import Vue from 'vue'
import EventBus from './event-bus'

Vue.use(EventBus)

六、全局事件匯流排使用場景

在項目中，可以使用全局事件匯流排來協調不同組件的行為，例如用戶與視圖組件的交互，或多個視圖組件之間的協作等。

七、全局事件匯流排不起作用

在使用過程中，如果全局事件匯流排不起作用，建議從以下幾個方面來排查問題：

1. 是否安裝了全局事件匯流排插件？

2. 全局事件匯流排是否被正確導入，並賦值給Vue.prototype？

3. 訂閱的事件名稱和觸發的事件名稱是否一致？

4. 訂閱的組件實例和觸發事件的組件實例是否是同一實例？

八、全局事件匯流排沒有效果

如果全局事件匯流排沒有效果，考慮以下幾個問題：

1. 事件處理程序是否被正確調用？

2. 是否傳遞了正確的參數給事件處理程序？

3. 訂閱事件時，監聽器的返回值是否有問題？返回false時不會觸發回調函數。

結語

全局事件匯流排是Vue中實現組件間通信的一種利器，它可以讓組件在沒有直接父子關係的情況下相互交互。開發者可以通過全局事件匯流排來協調多個組件的行為，提高交互性和可重用性。