溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
關于組件通信我相信小伙伴們肯定也都很熟悉，就不多說了，對組件通信還不熟悉的小伙伴移步這里。
在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);
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
