兄弟组件互相传递值

B组件向C组件传递一个值

创建一个js文件,默认导出一个vue实例
如下  aa.js 

import vue from 'vue';
export default new vue();

在父级组件中 引入兄弟组件  B   C

<template>
   <div class="bus-A">
   下面是两个兄弟组件：	
   	<BusB />
   	<BusC />
   </div>
</template>
<script>
//引入兄弟组件
import BusB from './BusB'
import BusC from './BusC'
export default{
   data(){
       return{
       }
   },components:{
       BusB,BusC
   }
}
</script>

//BusB 组件

<template>
    <div class="bus-B">
        组件B：
        <label>
        选择checkBox，可以触发组件BusC的监听事件
         <input type="checkBox" v-model="isChecked" @change="handleCheckBox">
        将B组件中的值 传递给C组件
         =========================
        </label>
    </div>
</template>
<script>
import bus from './aa';
export default{
    data(){
        return{
            isChecked:false
        }
    },methods:{
        handleCheckBox(){
            //分发'getCheckBoxStatus'事件
            bus.$emit('getCheckBoxStatus',this.isChecked,'我将将这个值从B到c');
            //传递多个参数使用逗号隔开
            // 分发事件可以将这个组件中的值 传递给另外一个组件
        }
    }
 }
</script>

//BusC组件
<template>
    <div class="bus-C">
        组件BusC：
        <p>
        这里可以得到组件BusB的checkBox的值：{{isChecked}}
        </p>
    </div>
</template>
<script>
import bus from './aa';
export default{
    data(){
        return{
            isChecked:false
        }
    },mounted(){
        // 必须在mounted中去调用一次
        this.getCheckBoxStatus1212();
    },methods:{
        getCheckBoxStatus1212(){
            //监听'getCheckBoxStatus'事件
            bus.$on('getCheckBoxStatus',(res,c) => {
                //监听到BusB组件的checkBox的状态 do something...
                //res,c是B组件传递过来的参数。
                console.log(res,c)
                this.isChecked = res;	
            })
        }
    },beforeDestroy(){
        //取消监听'getCheckBoxStatus'事件
        bus.$off('getCheckBoxStatus');
    }
}
</script>