Vue元件通訊之Bus
阿新 • • 發佈:2018-11-14
關於元件通訊我相信小夥伴們肯定也都很熟悉,就不多說了,對元件通訊還不熟悉的小夥伴移步這裡。
在vue2.0中 $dispatch 和 $broadcast 已經被棄用。官方文件中給出的解釋是:
因為基於元件樹結構的事件流方式實在是讓人難以理解,並且在元件結構擴充套件的過程中會變得越來越脆弱。這種事件方式確實不太好,我們也不希望在以後讓開發者們太痛苦。並且$dispatch 和 $broadcast 也沒有解決兄弟元件間的通訊問題。
官方推薦的狀態管理方案是 Vuex。不過如果專案不是很大,狀態管理也沒有很複雜的話,使用 Vuex 有種殺雞用牛刀的感覺,當然,這也是要根據自己的需求來的,只是建議。
vue官方文件中有這樣一個定義:非父子元件的通訊,內容很少,如下:
其實關於這個非父子元件通訊的demo還是有的,它藏在了$dispatch 和 $broadcast的遷移文件中,有興趣的小夥伴可以點選進去檢視。文件中的建議就是:
對於$dispatch 和 $broadcast最簡單的升級方式就是:通過使用事件中心,允許元件自由交流,無論元件處於元件樹的哪一層。由於 Vue 例項實現了一個事件分發介面,你可以通過例項化一個空的 Vue 例項來實現這個目的。
這個集中式的事件中介軟體就是 Bus。我習慣將bus定義到全域性:
app.js
var eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus);
然後在元件中,可以使用$emit, $on, $off 分別來分發、監聽、取消監聽事件:
分發事件的元件
// ...
methods: {
todo: function () {
this.$bus.$emit('todoSth', params); //params是傳遞的引數
//...
}
}
監聽的元件
// ... created() { this.$bus.$on('todoSth', (params) => { //獲取傳遞的引數並進行操作 //todo something }) }, // 最好在元件銷燬前 // 清除事件監聽 beforeDestroy () { this.$bus.$off('todoSth'); },
如果需要監聽多個元件,只需要更改 bus 的 eventName:
// ...
created() {
this.$bus.$on('firstTodo', this.firstTodo);
this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件監聽
beforeDestroy () {
this.$bus.$off('firstTodo', this.firstTodo);
this.$bus.$off('secondTodo', this.secondTodo);
},
如果文章有錯誤或是有什麼疑問,歡迎在評論中交流。