前言

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

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 在鉤子函數中監聽on事件

import Bus from '../common/js/bus.js'export default { data() {  return {  message: ''  } }, mounted() {  Bus.$on('on', (msg) => {   this.message = msg  })  } }

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。