Vue中使用Bus.js进行非父子组件通信

我们都知道在Vue中父子组件可以通过props和$emit()来进行数据信息的通信。但是如何实现非父子组件间的通信呢？其实我们可以通过创建一个Vue实例Bus作为媒介来进行通信。首先在要相互通信的组件中，都引入Bus，然后在两个组件中调用bus事件触发、监听来实现参数的传递和通信。

Bus.js可以如下写法：

import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();

export default bus;

在两个需要通信的组件内都引入Bus.js

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

在一个组件的methods中：

data(){
    return {
    param:'hello,world!'
    }
}
methods:{
    conBus(){
        $.emit('event',this.param)
    }
}

在另一个组件同样也引入Bus.js，并在生命周期的钩子函数中监听event事件即可

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