兄弟组件互相传递值

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

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

相关文章
|
11天前
|
前端开发 JavaScript
第一个组件
第一个组件
|
11天前
|
前端开发 JavaScript
传递给组件
传递给组件
|
1月前
|
Java
两个activivty之间传递数组(转)
两个activivty之间传递数组(转)
16 2
|
1月前
|
前端开发
useEffect 的第二个参数, 传空数组和传依赖数组有什么区别?
在 React 的 useEffect 钩子函数中,第二个参数用于指定依赖项数组。这个参数可以影响 useEffect 的触发时机和频率。在 React 的 useEffect 钩子函数中,第二个参数用于指定依赖项数组。这个参数可以影响 useEffect 的触发时机和频率。
39 0
|
1月前
|
存储 Web App开发 缓存
详细解读 Fiber 节点的每一个属性含义
详细解读 Fiber 节点的每一个属性含义
|
JavaScript
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
127 0
|
前端开发
react中父子组件传值详解,如何进行传值校验(父传子,子组件改变父组件的值)
本篇主要给大家介绍react中父子组件传值详解,如何进行传值校验
571 0
|
JavaScript
vue父组件调用子组件传递值
vue父子组件调用,避免异常TypeError :Cannot read properties of undefined
178 0
|
前端开发
前端工作总结110-不能改变父组件值
前端工作总结110-不能改变父组件值
44 0
前端工作总结110-不能改变父组件值
|
前端开发
前端工作总结111-不能改变父组件值
前端工作总结111-不能改变父组件值
75 0
前端工作总结111-不能改变父组件值

热门文章

最新文章