Vue Bus 是 Vue.js 應用程序中心化的事件總線。事件總線為應用程序中的組件提供基于事件的通信。Vue.js 提供了一個輕量級的事件代理(偏向訂閱-發布模式)稱為 Vue Bus,該代理允許您在應用程序內部避免在父組件和子組件之間直接傳遞事件或 Props。
// main.js import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); new Vue({ el: '#app' }); // ComponentA.vue export default { methods: { handleClick() { this.$bus.emit('eventMessage', 'Hi from Component A'); } } }; // ComponentB.vue export default { mounted() { this.$bus.on('eventMessage', message =>{ console.log(message); }); } };
在這個例子中,我們在 main.js 中全局安裝 Vue Bus。然后,我們在 ComponentA.vue 中通過 $bus.emit('eventMessage', 'Hi from Component A'); 發送一個事件消息。最后,在 ComponentB.vue 中,我們使用 $bus.on('eventMessage', message =>{ ... }); 監聽事件消息。
Vue.js 的事件總線非常適合在 Vue.js 應用程序中解決各種通信問題。使用事件總線避免了代碼之間的耦合,使組件之間的通信變得更加簡單和靈活。