Vue組件通信之Bus的具體使用
關(guān)于組件通信我相信小伙伴們肯定也都很熟悉，就不多說了，對組件通信還不熟悉的小伙伴移步這里。
在vue2.0中 $dispatch 和 $broadcast 已經(jīng)被棄用。官方文檔中給出的解釋是：
因為基于組件樹結(jié)構(gòu)的事件流方式實在是讓人難以理解，并且在組件結(jié)構(gòu)擴展的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以后讓開發(fā)者們太痛苦。并且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通信問題。
官方推薦的狀態(tài)管理方案是 Vuex。不過如果項目不是很大，狀態(tài)管理也沒有很復雜的話，使用 Vuex 有種殺雞用牛刀的感覺，當然，這也是要根據(jù)自己的需求來的，只是建議。
vue官方文檔中有這樣一個定義：非父子組件的通信，內(nèi)容很少，如下：
其實關(guān)于這個非父子組件通信的demo還是有的，它藏在了$dispatch 和 $broadcast的遷移文檔中，有興趣的小伙伴可以點擊進去查看。文檔中的建議就是：
對于$dispatch 和 $broadcast最簡單的升級方式就是：通過使用事件中心，允許組件自由交流，無論組件處于組件樹的哪一層。由于 Vue 實例實現(xiàn)了一個事件分發(fā)接口，你可以通過實例化一個空的 Vue 實例來實現(xiàn)這個目的。
這個集中式的事件中間件就是 Bus。我習慣將bus定義到全局：
app.js
var eventBus = {
install(Vue,options) {
Vue.prototype.$bus = vue
}
};
Vue.use(eventBus);
然后在組件中，可以使用$emit， $on， $off 分別來分發(fā)、監(jiān)聽、取消監(jiān)聽事件：
分發(fā)事件的組件
// ...
methods: {
todo: function () {
this.$bus.$emit('todoSth', params); //params是傳遞的參數(shù)
//...
}
}
監(jiān)聽的組件
// ...
created() {
this.$bus.$on('todoSth', (params) => { //獲取傳遞的參數(shù)并進行操作
//todo something
})
},
// 最好在組件銷毀前
// 清除事件監(jiān)聽
beforeDestroy () {
this.$bus.$off('todoSth');
},
如果需要監(jiān)聽多個組件，只需要更改 bus 的 eventName:
// ...
created() {
this.$bus.$on('firstTodo', this.firstTodo);
this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件監(jiān)聽
beforeDestroy () {
this.$bus.$off('firstTodo', this.firstTodo);
this.$bus.$off('secondTodo', this.secondTodo);
},
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue初用antd 用v-model來雙向綁定Form表單問題
這篇文章主要介紹了使用vue初用antd 用v-model來雙向綁定Form表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了vue選項卡Tabs組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Vue Easytable是一個基于Vue.js的數(shù)據(jù)表格組件庫,它提供豐富的功能和靈活的配置,幫助開發(fā)者快速搭建復雜的數(shù)據(jù)表格界面,這篇文章主要介紹了vue easytable組件使用,需要的朋友可以參考下2023-09-09
vue 項目中的this.$get,this.$post等$的用法案例詳解
vue.js的插件應該暴露一個install方法。這個方法的第一個參數(shù)是vue構(gòu)造器，第二個參數(shù)是一個可選的選項對象，首頁要安裝axios，本文結(jié)合案例代碼給大家詳細講解vue 中的this.$get,this.$post等$的用法，一起學習下吧2022-12-12
vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決
這篇文章主要為大家介紹了vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
Nuxt項目支持eslint+pritter+typescript的實現(xiàn)
這篇文章主要介紹了Nuxt項目支持eslint+pritter+typescript的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue3.0報錯Cannot?find?module‘worker_threads‘的解決辦法
這篇文章介紹了vue3.0報錯Cannot?find?module‘worker_threads‘的解決辦法。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要給大家介紹了關(guān)于對vue生命周期的深入理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
vue 解決無法對未定義的值,空值或基元值設(shè)置反應屬性報錯問題
這篇文章主要介紹了vue 解決無法對未定義的值,空值或基元值設(shè)置反應屬性報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue-cli3項目打包后自動化部署到服務器的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09