43、vue eventBus实现兄弟组件互相通信

vue父子组件的通信可以通过props和emit来实现，而兄弟组件无法通过props和emit通信。

但是可以采用eventBus的方式来实现通信,主要的原理是新建一个bus，然后再两个兄弟组件之间引入这个bus，一个组件监听事件，而另一个组件则负责触发事件。

父组件App.vue

bus.js

import Vue from "vue"
export default new Vue(); 

car.vue

gasStation.vue

当在car组件上触发点击事件时，就会触发bus上监听的事件，而bus事件监听在gasStation里面，这个时候就会触发gasStation

上的事件监听，而通过回调函数，就可以拿到car组件传过来的数据，从而实现兄弟组件通信。

注释：

//创建一个用于通信的bus模块
let bus = {
  install($){
    //在vue的原型上添加getBus和setBus
    $.prototype.getBus = this.get
    $.prototype.setBus = this.set
  },
  get(key){
    //如果实例上有bus对象,返回查询结果，否则undefined
    if(this.bus){
      return this.bus[key]
    }else{
      return undefined
    }
  },
  set(key,value){
    //如果实例上没有bus对象,创建一个，并设置属性
    if(!this.bus){
      this.bus = {}
    }
    this.bus[key] = value
  }
}
Vue.use(bus);


//注：写在vue中的main文件中即可.


//当我们在使用的时候。


created(){
    this.setBus('name','xiaoming');
    console.log(this.getBus('name'));
}