Vue 非父子传参(兄弟组件)bus中央总线 精彩demo
2019-09-29 本文已影响0人
顺小星
首先,新建一个js文件,并在两个组件中引入。如下图:
![](https://img.haomeiwen.com/i18344853/7b3950c907226cdd.png)
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"是控制点击出现,再点击消失的
效果:
初始:
![](https://img.haomeiwen.com/i18344853/05b7cbffb45f2096.png)
点击一次:
![](https://img.haomeiwen.com/i18344853/a61eedaf8b6d568b.png)
点击两次:
![](https://img.haomeiwen.com/i18344853/4c725405cff40cee.png)
总结:
1、新建一个空的 js :
import Vue from 'vue'
export default new Vue;
2、在两个子页面中分别导入:
import Bus from '../bus/index'
3、在输出组件中设定一个点击方法(或其他):
![](https://img.haomeiwen.com/i18344853/23604abc63bed46c.png)
4、在接收组件总对上暗号,并接收:
![](https://img.haomeiwen.com/i18344853/ffe157218f8f89f5.png)