vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信詳解
前言
大家應(yīng)該都知道,vue2中廢棄了$dispatch和$broadcast廣播和分發(fā)事件的方法。父子組件中可以用props和$emit()。如何實(shí)現(xiàn)非父子組件間的通信,可以通過實(shí)例一個(gè)vue實(shí)例Bus作為媒介,要相互通信的兄弟組件之中,都引入Bus,然后通過分別調(diào)用Bus事件觸發(fā)和監(jiān)聽來(lái)實(shí)現(xiàn)通信和參數(shù)傳遞。下面話不多說了,來(lái)一起看看詳細(xì)的介紹吧。
Bus.js可以是這樣
import Vue from 'vue' export default new Vue()
在需要通信的組件都引入Bus.js
import Bus from '../common/js/bus.js'
添加一個(gè)button,點(diǎn)擊后$emit一個(gè)事件
<button @click="toBus">子組件傳給兄弟組件</button>
methods
methods: { toBus () { Bus.$emit('on', '來(lái)自兄弟組件') } }
另一個(gè)組件也import Bus.js 在鉤子函數(shù)中監(jiān)聽on事件
import Bus from '../common/js/bus.js' export default { data() { return { message: '' } }, mounted() { Bus.$on('on', (msg) => { this.message = msg }) } }
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vuex中...mapstate和...mapgetters的區(qū)別及說明
這篇文章主要介紹了vuex中...mapstate和...mapgetters的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue.js項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法
本文主要介紹了Vue.js項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08Vue自定義render統(tǒng)一項(xiàng)目組彈框功能
這篇文章主要介紹了Vue自定義render統(tǒng)一項(xiàng)目組彈框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問題
本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue.js國(guó)際化 vue-i18n插件的使用詳解
本篇文章主要介紹了vue.js國(guó)際化 vue-i18n插件的使用詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法,需要的朋友可以參考下2017-12-12vue+axios全局添加請(qǐng)求頭和參數(shù)操作
這篇文章主要介紹了vue+axios全局添加請(qǐng)求頭和參數(shù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12