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

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

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

父组件App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--<router-view/>-->
    <car>我是汽车，我要加油</car>
    <gas-station>加油站</gas-station>
  </div>
</template>

<script>
import Car  from "./car.vue"
import GasStation  from "./car.vue"
export default {
  name: 'App',
  components:{Car,GasStation}
}
</script>

bus.js

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

car.vue

<template>
  <div @click="handle">汽车</div>
</template>
<script>
  import bus from "./bus"
  export default{
    methods:{
      handle(){
        //通过emit触发事件，并传值
        bus.$emit("eventTarget","我要加油");
      }
    }
  }
</script>

gasStation.vue

<template>
  <div>加油站</div>
</template>
<script>
  import bus from "./bus"
  export default{
    mounted(){
      //通过on监听事件，回调方法获取数据
      bus.$on("eventTarget",v=>{
        console.log(v);
      });
    }
  }
</script>

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

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