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