vue2利用Bus.js如何實現(xiàn)非父子組件通信詳解

更新時間：2017年08月25日 11:11:04 作者：印象卡卡

這篇文章主要給大家介紹了關于vue2利用Bus.js如何實現(xiàn)非父子組件通信的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。

前言

大家應該都知道，vue2中廢棄了$dispatch和$broadcast廣播和分發(fā)事件的方法。父子組件中可以用props和$emit()。如何實現(xiàn)非父子組件間的通信，可以通過實例一個vue實例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，然后通過分別調(diào)用Bus事件觸發(fā)和監(jiān)聽來實現(xiàn)通信和參數(shù)傳遞。下面話不多說了，來一起看看詳細的介紹吧。

Bus.js可以是這樣

import Vue from 'vue'
export default new Vue()

在需要通信的組件都引入Bus.js

import Bus from '../common/js/bus.js'

添加一個button，點擊后$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)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

vue.js中created()與activated()的個人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個人使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue的props配置項詳解
這篇文章主要為大家詳細介紹了Vue的props配置項，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue的虛擬DOM使用方式
這篇文章主要介紹了vue的虛擬DOM使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-09-09
詳解vue掛載到dom上會發(fā)生什么
這篇文章主要介紹了詳解vue掛載到dom上會發(fā)生什么，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue打包之后的dist文件如何運行
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關于vue打包之后的dist文件如何運行的相關資料,需要的朋友可以參考下
2023-05-05
vue子組件設計provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設計provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
詳解vue3沙箱機制
這篇文章主要介紹了詳解vue3 沙箱機制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
Vue中mintui的field實現(xiàn)blur和focus事件的方法
今天小編就為大家分享一篇Vue中mintui的field實現(xiàn)blur和focus事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue 面包屑導航組件封裝
本文主要介紹了vue 面包屑導航組件封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
vue項目中接入websocket時需要ip端口動態(tài)部署問題
這篇文章主要介紹了vue項目中接入websocket時需要ip端口動態(tài)部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-09-09