vue 兄弟組件之間的傳值

一. 子傳父，父傳子。

二.

1、兄弟之間傳遞數據需要借助於事件車，通過事件車的方式傳遞數據

2、創建一個Vue的實例，讓各個兄弟共用同一個事件機制。

3、傳遞數據方，通過一個事件觸發bus.$emit(方法名，傳遞的數據)。

4、接收數據方，通過mounted(){}觸發bus.$on(方法名，function(接收數據的參數){用該組件的數據接收傳遞過來的數據})，此時函數中的this已經發生了改變，可以使用箭頭函數。

實例如下：

我們可以創建一個單獨的js文件eventVue.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里面的值了。