全局事件總線 EventBus 在前端開發中是一種用于實現組件間通信的機制，適用于兄弟組件或跨層級組件間的數據傳遞。
1. 創建全局 EventBus 實例
在前端項目中，先創建一個全局的 EventBus 實例。在 Vue 中，可以通過創建一個新的 Vue 實例來實現；在原生 JavaScript 中，可以通過對象或類來實現。
Vue 中的實現
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();原生 JavaScript 的實現
// eventBus.js
class EventBus {constructor() {this.events = {};}// 訂閱事件on(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}// 發布事件emit(eventName, data) {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(data));}}// 取消訂閱off(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);}}
}export const eventBus = new EventBus();2. 在組件中使用 EventBus
發布事件
在需要發布事件的組件中，調用?emit?方法：
import { EventBus } from './eventBus';
export default {methods: {sendMessage() {EventBus.$emit('messageEvent', 'Hello');}}
}訂閱事件
在需要接收事件的組件中，調用?on?方法，并在組件銷毀時取消訂閱：
import { EventBus } from './eventBus';
export default {created() {EventBus.$on('messageEvent', this.handleMessage);},methods: {handleMessage(message) {console.log(message); // 輸出: Hello}},beforeDestroy() {EventBus.$off('messageEvent', this.handleMessage);}
}3. 使用場景
兄弟組件通信：當兩個組件沒有直接的父子關系時，可以通過 EventBus 進行通信。
跨層級組件通信：當組件層級較深，使用 props 和事件冒泡不方便時，EventBus 可以簡化通信。
全局狀態管理：對于簡單的應用，EventBus 可以用于管理全局狀態，但對于復雜應用，建議使用 Vuex 或 Pinia 等狀態管理庫。
4. 注意事項
內存泄漏：在組件銷毀時，必須取消事件訂閱，否則會導致內存泄漏。
調試困難：EventBus 的事件傳播是隱式的，可能會增加調試難度。建議在使用時，仔細管理事件的發布和訂閱。
避免濫用：EventBus 雖然提供了方便的組件間通信方式，但在大型項目中，過度依賴 EventBus 可能導致事件管理混亂。建議在合適的場景下使用，避免濫用。
?若文章對你有幫助，點贊、收藏加關注吧！
