兄弟组件互相传递值

简介: 兄弟组件互相传递值

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>



1425695-20200324225442263-807716098.png

相关文章
|
1月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
21 0
|
19天前
|
前端开发 JavaScript
第一个组件
第一个组件
|
1月前
|
Java
两个activivty之间传递数组(转)
两个activivty之间传递数组(转)
19 2
|
1月前
|
存储 Web App开发 缓存
详细解读 Fiber 节点的每一个属性含义
详细解读 Fiber 节点的每一个属性含义
|
JavaScript
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
128 0
vue3 子组件接收父组件的值(defineProps )
vue3 子组件接收父组件的值(defineProps )
700 0
|
JavaScript API 数据处理
|
前端开发
react中父子组件传值详解,如何进行传值校验(父传子,子组件改变父组件的值)
本篇主要给大家介绍react中父子组件传值详解,如何进行传值校验
574 0
|
JavaScript
vue父组件调用子组件传递值
vue父子组件调用,避免异常TypeError :Cannot read properties of undefined
181 0