vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信詳解
更新時(shí)間：2017年08月25日 11:11:04 作者：印象卡卡
這篇文章主要給大家介紹了關(guān)于vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
前言
大家應(yīng)該都知道，vue2中廢棄了$dispatch和$broadcast廣播和分發(fā)事件的方法。父子組件中可以用props和$emit()。如何實(shí)現(xiàn)非父子組件間的通信，可以通過(guò)實(shí)例一個(gè)vue實(shí)例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，然后通過(guò)分別調(diào)用Bus事件觸發(fā)和監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)通信和參數(shù)傳遞。下面話不多說(shuō)了，來(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)聽(tīng)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)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue.js中created()與activated()的個(gè)人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue的props配置項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了vue的虛擬DOM使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了詳解vue掛載到dom上會(huì)發(fā)生什么，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
我們知道使用webpack打包vue項(xiàng)目后會(huì)生成一個(gè)dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運(yùn)行呢?這篇文章主要給大家介紹了關(guān)于vue打包之后的dist文件如何運(yùn)行的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了詳解vue3 沙箱機(jī)制，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實(shí)現(xiàn)blur和focus事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue項(xiàng)目中接入websocket時(shí)需要ip端口動(dòng)態(tài)部署問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中接入websocket時(shí)需要ip端口動(dòng)態(tài)部署問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09