vue-bus 組件通信插件

vue-bus

一個 Vue.js 事件中心插件，同時支持 Vue 1.0 和 2.0

原因

Vue 2.0 重新梳理了事件系統，因為基於組件樹結構的事件流方式實在是讓人難以理解，並且在組件結構擴展的過程中會變得越來越脆弱。雖然依然保留了父子組件間的事件流，但有諸多限制，比如不支持跨多層父子組件通信，也沒有解決兄弟組件間的通信問題。

Vue 推薦使用一個全局事件中心來分發和管理應用內的所有事件，詳見文檔。這是一個最佳實踐，同時適用於 Vue 1.0 和 2.0。你當然可以聲明一個全局變量來使用事件中心，但你如果在使用 webpack 之類的模塊系統，這顯然不合適。每次使用都手動 import 進來也很不方便，所以就有了這個插件：vue-bus

vue-bus 提供了一個全局事件中心，並將其注入每一個組件，你可以像使用內置事件流一樣方便的使用全局事件。

安裝

$ npm install vue-bus

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝 vue-bus：

import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus);

如果使用全局的 script 標簽，則無須如此（手動安裝）。

使用

監聽事件和清除監聽

// ... created() { this.$bus.on('add-todo', this.addTodo); this.$bus.once('once', () => console.log('這個監聽器只會觸發一次')); }, beforeDestroy() { this.$bus.off('add-todo', this.addTodo); }, methods: { addTodo(newTodo) { this.todos.push(newTodo); } }

觸發事件

// ... methods: { addTodo() { this.$bus.emit('add-todo', { text: this.newTodoText }); this.$bus.emit('once'); this.newTodoText = ''; } }

注意：$bus.on $bus.once $bus.off $bus.emit 只是 $bus.$on $bus.$once $bus.$off $bus.$emit 的別名。 詳見 API。