Vue 非父子传参(兄弟组件)bus中央总线 精彩demo
2019-09-29 本文已影响0人
顺小星
首先,新建一个js文件,并在两个组件中引入。如下图:
两个子组件与中央总线js文件里写一个空壳,如下:
import Vue from 'vue'
export default new Vue;
一、父组件中,注册两个子组件并使用。格局安排如下:
<div class="big">
<Son1></Son1>
<Son2></Son2>
</div>
二、son1组件中,点击一次传递信息给son2。
html中:
<div @click="clickSon">子组件一号,点我传值,再点消失</div>
js中:用emit通过bus发送数据,暗号 “aaa”
import Bus from '../bus/index'
data() {
return {
son1Message: {
isShow: true,
info: "我是来自一号组件的大魔王阿星!"
}
};
},
methods: {
clickSon() {
this.son1Message.isShow = !this.son1Message.isShow;
Bus.$emit("aaa", this.son1Message);
}
}
三、son2中,在created中
js中:对上son1中 “aaa” 的暗号,拿过来在data中定义变量去接
import Bus from '../bus/index'
data(){
return{
isShow:'',
son2Message:""
}
},
created(){
Bus.$on("aaa",res=>{
this.isShow = res.isShow
this.son2Message = res.info
})
},
html中:
<div class="son2">
子组件二号
<div v-if="isShow">{{son2Message}}</div>
</div>
其中v-if="isShow"是控制点击出现,再点击消失的
效果:
初始:
初始状态
点击一次:
点击一次
点击两次:
所传值消失
总结:
1、新建一个空的 js :
import Vue from 'vue'
export default new Vue;
2、在两个子页面中分别导入:
import Bus from '../bus/index'
3、在输出组件中设定一个点击方法(或其他):
通过Bus设置暗号,并发送
4、在接收组件总对上暗号,并接收:
通过Bus对上暗号,并接收