本示例基于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');
}