vue 事件$on,$off的注意事项

遇到的vue事件on,off的坑

组件 A 使用了 组件B

组件A产生事件:

TypeScript 复制代码
this.$root.$emit('event1', param)

组件B的created()里监听了事件:

TypeScript 复制代码
this.$root.$on('event1', (param)=>{...})

组件B的beforeDestroy()里取消了事件监听:

TypeScript 复制代码
this.$root.$off('event1')

组件刷新时出现了:组件B2 created() ->组件B1 beforeDestroy() 导致组件B2里的监听被清除了

修改方案:

组件B的created()里监听事件,留下函数句柄

TypeScript 复制代码
this.event1Callback = (param)=>{...}
this.$root.$on('event1', this.event1Callback)

组件B的beforeDestroy()里使用函数句柄取消事件监听:

TypeScript 复制代码
this.$root.$off('event1', this.event1Callback)
相关推荐
汪子熙2 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315239 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple16 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua23 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风23 分钟前
录音实时上传
前端·javascript
江号软件分享27 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长36 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商44 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享1 小时前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM1 小时前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js