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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。