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);

Vue中使用和移除总线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) 只会移除当前组件的 * ,不会影响其他组件的 * 。

如果接收事件使用方式二,是无法使用此方法进行移除的

方式二

会移除所有事件标识为radioChangebus事件监听

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>
...

正确测试效果

Vue中使用和移除总线Bus的注意事项详解

先发送radioChange销毁A组件,发送radioChange,只有B组件能接收生成A组件,发送radioChange,A和B都能收到

Vue中使用和移除总线Bus的注意事项详解

错误测试效果

如果A组件没有在销毁前移除事件监听,则经过多次组件的销毁和生成之后,会有多个重复的事件监听,可能造成内存泄漏

Vue中使用和移除总线Bus的注意事项详解

来源:https://blog.csdn.net/qq_23858785/article/details/130394438

标签:Vue,移除,总线,Bus
0
投稿

猜你喜欢

  • 手把手教你Navicat如何导出Excel格式的表结构

    2024-01-20 21:39:36
  • VB.NET调用MySQL存储过程并获得返回值的方法

    2024-01-12 16:03:45
  • python使用xlrd和xlwt读写Excel文件的实例代码

    2021-08-30 08:43:55
  • 详解ABP框架中Session功能的使用方法

    2024-05-13 09:16:28
  • windows+apache+mod_python配置django运行环境

    2021-02-01 04:06:54
  • 使用Python画出小人发射爱心的代码

    2022-08-07 01:52:16
  • Python时间序列处理之ARIMA模型的使用讲解

    2021-04-10 05:53:34
  • win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题

    2022-03-31 17:26:15
  • MySQL中的binlog相关命令和恢复技巧

    2024-01-22 20:42:08
  • Pytest+Request+Allure+Jenkins实现接口自动化

    2021-04-09 13:50:44
  • python爬虫爬取快手视频多线程下载功能

    2021-10-29 09:24:04
  • django文档学习之applications使用详解

    2021-09-11 11:15:12
  • python GUI库图形界面开发之PyQt5线程类QThread详细使用方法

    2023-12-03 20:29:40
  • python+opencv实现摄像头调用的方法

    2022-08-13 02:29:46
  • 惰性函数定义模式

    2007-09-26 20:56:00
  • HTML和SEO基础知识:H标签全透视

    2010-09-21 16:45:00
  • Django框架中render_to_response()函数的使用方法

    2023-09-03 13:58:49
  • MySql 快速插入千万级大数据的方法示例

    2024-01-15 16:43:44
  • python计算机视觉opencv矩形轮廓顶点位置确定

    2022-06-07 16:30:44
  • Python中plt.imshow(image)无法显示图片的解决

    2022-01-12 15:33:04
  • asp之家 网络编程 m.aspxhome.com