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