vue 非父子组件通讯之bus总线通讯

本示例基于vue2(不包括ts)所写

bus通讯使用要点：发送数据$emit后的传值方法与接收数据$on后的接收值方法对应；

类似于两个人约在一个饭店吃饭，只有到的店一样才能碰面（操作传递的数据）

1、在src文件夹下utils文件夹，在其下在新建bus.js文件

import Vue from 'vue';
export default new Vue;

2、引入

// 部分引入
import Bus from '@/utils/bus';


// 全局引入bus,在main.js文件中
import bus from './utils/bus'
Vue.prototype.$bus=bus;

3、使用

3.1、发送数据

// 全局引入
// I、发送数据
passVal(num){
    if(num==1){
        this.$bus.$emit("getPassValA", {isShow:this.a+=10});
    }else if(num==2){
        this.$bus.$emit("getPassValB", {isShow:this.b+=20});
    }
}


// 部分引入
import Bus from '@/utils/bus';
passVal(num){
    if(num==1){
        Bus.$emit("getPassValA", {isShow:this.a+=10});
    }else if(num==2){
        Bus.$emit("getPassValB", {isShow:this.b+=20});
    }
}

3.2、接收数据

mounted(){
    // II、接收数据（部分引入）
    Bus.$on("getPassValA", (data)=>{
        // 数据处理
    }); 

    // II、接收数据（全局引入）
    this.$bus.$on("getPassValA", (data)=>{
        // 数据处理
    });  
},

简单示例

新建三个兄弟组件，demoB发送数据，demoA和demoC接收数据

 demoB

<template>
    <div class="demoB-container">
        <h1>demoB</h1>
        <el-button type="success" @click="passVal(1)">传值给demoA</el-button><br><br>
        <el-button type="warning" @click="passVal(2)">传值给demoB</el-button>
    </div>
</template>
<script>
// import Bus from '@/utils/bus';
export default{
    name:'demoB',
    data(){
        return{
            a:10,
            b:20,
        }
    },
    methods:{
        // I、发送数据
        passVal(num){
            if(num==1){
                this.$bus.$emit("getPassValA", {isShow:this.a+=10});
            }else if(num==2){
                this.$bus.$emit("getPassValB", {isShow:this.b+=20});
            }
        }
    }
}
</script>
<style scoped>
.demoB-container{
    width: 200px;
    height: 200px;
    background: #409EFF;
    position: absolute;
    top: 100px;
    left:0;
    right:0;
    margin: auto;
}
</style>

demoA

<template>
    <div class="demoA-container">
        <h1>demoA</h1>
        {{num}}
    </div>
</template>
<script>
// 部分引入
// import Bus from '@/utils/bus';
export default{
    name:'demoA',
    data(){
        return{
            num:0
        }
    },
    methods:{
    },
    mounted(){
        // II、接收数据（部分引入）
        // Bus.$on("getPassValA", (data)=>{
        //     console.log('demoA',data);
        //     this.num=data.isShow;
        // }); 

        // II、接收数据（全局引入）
        this.$bus.$on("getPassValA", (data)=>{
            console.log('demoA',data);
            this.num=data.isShow;
        });  
    },
    destroyed(){
        this.$bus.$off('getPassValA');
    }
}
</script>
<style scoped>
.demoA-container{
    width: 200px;
    height: 200px;
    background: #67C23A;
    position: absolute;
    left:0;
    top: 100px;
}
</style>

demoC

<template>
    <div class="demoC-container">
        <h1>demoC</h1>
        {{num}}
    </div>
</template>
<script>
// import Bus from '@/utils/bus';
export default{
    name:'demoC',
    data(){
        return{
            num:0
        }
    },
    methods:{
    },
    mounted(){
        // II、接收数据
        this.$bus.$on("getPassValB", (data)=>{
            console.log('demoC',data);
            this.num=data.isShow;
        });  
    }
}
</script>
<style scoped>
.demoC-container{
    width: 200px;
    height: 200px;
    background: #E6A23C;
    position: absolute;
    right:0;
    top: 100px;
}
</style>

效果

 

 踩坑点：

1、点击一次，触发多次，导致多次传递重复的值

 解决办法：

destroyed(){
    this.$bus.$off('getPassValA');
}