參考：
https://www.cnblogs.com/xiaotanke/p/7427636.html
https://blog.csdn.net/a15088712506/article/details/78967937

vue中，父子組件的傳值常見，方法也很簡單，兄弟組件之間的傳值稍微復雜一些，用的也少，在此備忘。

【一】普通方法

1、兄弟之間傳遞數據需要借助于事件車，通過事件車的方式傳遞數據
2、創建一個Vue的實例，讓各個兄弟共用同一個事件機制。
3、傳遞數據方，通過一個事件觸發bus.on(方法名，function(接收數據的參數){用該組件的數據接收傳遞過來的數據})，此時函數中的this已經發生了改變，可以使用箭頭函數。

實例如下：
我們可以創建一個單獨的js文件event.js,內容如下

import Vue from 'vue'
export default new Vue

假如父組件如下：

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

子組件a如下：

<template>
      <div class="components-a">
           <button @click="abtn">A按鈕</button>
      </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
      name: 'app',
      data () {
        return {
                ‘msg':"我是組件A"
        }
      },
      methods:{
           abtn:function(){
                   eventVue.$emit("myFun",this.msg)   //$emit這個方法會觸發一個事件
           }
      }
}
</script>

子組件b如下：

<template>
     <div class="components-a">
         <div>{{btext}}</div>
     </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',
   data () {
        return {
           'btext':"我是B組件內容"
        }
   },
   created:function(){
       this.bbtn();
   },
   methods:{
       bbtn:function(){
            eventVue.$on("myFun",(message)=>{   //這里最好用箭頭函數，不然this指向有問題
                 this.btext = message      
            })
       }
    }
}
</script>

這樣在子組件a里面點擊函數就可以改變兄弟組件b里面的值了。

【二】方法一的變種

省略了外部的js文件，直接把總線放在main.js里的vue實例中，寫法如下

new Vue({
    el: "#app",
    router,
    data: {
        eventVue: new Vue()
    },
    template: "<App/>"
    compnents: {App}
})

在使用的時候，不需要引入外部文件，只需要在Bus前加this.$root，即可調用。

子組件a：

methods:{
   abtn: function(){
           this.$root.eventVue.$emit("myFun",this.msg)   //$emit這個方法會觸發一個事件
   }
}

子組件b：

methods:{
   bbtn:function(){
        this.$root.eventVue.$on("myFun",(message)=>{   //這里最好用箭頭函數，不然this指向有問題
             this.btext = message      
        })
   }
}