Vue中使用和移除总线Bus的注意事项详解
作者:anjushi_ 时间:2024-06-05 15:30:33
初始化并封装
在main.js
中对bus进行初始化, Bus是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法
Vue.prototype.$bus = new Vue({
methods: {
emit(event, ...args) {
this.$emit(event, ...args);
},
on(event, callback) {
this.$on(event, callback);
},
off(event, callback) {
this.$off(event, callback);
}
}
});
主要是用on
代替$on
,也可以使用简化的初始化,如下,组件中也带$
即可
Vue.prototype.$bus = new Vue();
组件中可以使用this.$bus
可以查看bus的实例
console.log(this.$bus);
发送事件
两个参数,前一个是事件标识,后一个是发送的内容
this.$bus.emit("radioChange", "test");
接收事件
方式一(推荐)
this.$bus.on('radioChange', this.Aaa);
Aaa(ii){
console.log("radioChange", ii)
}
方式二(不推荐)
this.$bus.on('radioChange', res => {
console.log("radioChange", res)
})
移除事件监听
如果不移除,每次进入组件都会新建一个bus监听,导致不断重复
在组件的beforeDestroy
阶段执行
方式一:只移除本组件的bus监听
beforeDestroy() {
this.$bus.off("radioChange", this.Aaa);
},
尽管组件 A 和组件 B 的事件处理器名称可能相同,但它们是不同的函数实例。这是因为在每个组件中,这些方法都是组件实例的成员。因此,当一个组件在销毁时调用 off
,它不会影响其他组件的事件 * 。
实际上,每个组件都有自己独立的作用域,this.Aaa()
在组件 A 和组件 B 的上下文中都是指向组件自己的方法。因此,在组件销毁时使用 this.$bus.off('radioChange', this.Aaa)
只会移除当前组件的 * ,不会影响其他组件的 * 。
如果接收事件使用方式二,是无法使用此方法进行移除的
方式二
会移除所有事件标识为radioChange
的bus
事件监听
this.$bus.off("radioChange");
如果要使用这种方式,需要为每个组件都制定名称不同的事件标识
要避免这种情况,需要为每个组件提供唯一的事件处理函数(发送和接收均使用方式一)
方式三
移除全部监听,慎用
this.$bus.off();
实际使用
发送组件
<template>
<div class="page-all">
<el-button @click="sendBus">sendBus</el-button>
<el-button @click="showA = !showA">Turn showA</el-button>
<el-row style="height: 300px;">
<el-col :span="12" v-if="showA">
<Ar></Ar>
</el-col>
<el-col :span="12">
<Br></Br>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
showA: true,
}
},
methods: {
sendBus(){
// console.log(this.$bus);
console.log("send");
this.$bus.emit("radioChange", "test");
},
},
mounted() {},
}
</script>
<style scoped></style>
<style></style>
组件A
<template>
...
</template>
<script>
export default {
data() {
return {}
},
components: {},
methods: {
Aaa(ii){
console.log("radioChange", ii)
}
},
mounted() {
this.$bus.on('radioChange', this.Aaa);
},
beforeDestroy(){
this.$bus.off("radioChange", this.Aaa);
},
}
</script>
组件B
<template>
...
</template>
<script>
export default {
...
methods: {
Aaa(ii){
console.log("radioChange", ii)
}
},
mounted() {
this.$bus.on('radioChange', this.Aaa);
},
beforeDestroy() {
this.$bus.off("radioChange", this.Aaa);
},
}
</script>
...
正确测试效果
先发送radioChange销毁A组件,发送radioChange,只有B组件能接收生成A组件,发送radioChange,A和B都能收到
错误测试效果
如果A组件没有在销毁前移除事件监听,则经过多次组件的销毁和生成之后,会有多个重复的事件监听,可能造成内存泄漏
来源:https://blog.csdn.net/qq_23858785/article/details/130394438
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
手把手教你Navicat如何导出Excel格式的表结构
![](https://img.aspxhome.com/file/2023/8/105658_0s.jpg)
VB.NET调用MySQL存储过程并获得返回值的方法
python使用xlrd和xlwt读写Excel文件的实例代码
详解ABP框架中Session功能的使用方法
![](https://img.aspxhome.com/file/2023/2/126192_0s.png)
windows+apache+mod_python配置django运行环境
使用Python画出小人发射爱心的代码
![](https://img.aspxhome.com/file/2023/3/103513_0s.jpg)
Python时间序列处理之ARIMA模型的使用讲解
![](https://img.aspxhome.com/file/2023/0/76800_0s.png)
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
MySQL中的binlog相关命令和恢复技巧
Pytest+Request+Allure+Jenkins实现接口自动化
![](https://img.aspxhome.com/file/2023/3/112593_0s.png)
python爬虫爬取快手视频多线程下载功能
![](https://img.aspxhome.com/file/2023/6/120426_0s.jpg)
django文档学习之applications使用详解
![](https://img.aspxhome.com/file/2023/2/107112_0s.png)
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
![](https://img.aspxhome.com/file/2023/1/70221_0s.png)
python+opencv实现摄像头调用的方法
![](https://img.aspxhome.com/file/2023/6/93986_0s.jpg)
惰性函数定义模式
HTML和SEO基础知识:H标签全透视
![](https://img.aspxhome.com/file/UploadPic/20109/21/1412060-45s.jpg)
Django框架中render_to_response()函数的使用方法
MySql 快速插入千万级大数据的方法示例
python计算机视觉opencv矩形轮廓顶点位置确定
![](https://img.aspxhome.com/file/2023/9/105309_0s.png)
Python中plt.imshow(image)无法显示图片的解决
![](https://img.aspxhome.com/file/2023/4/86644_0s.png)