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)
相关推荐
耶啵奶膘几秒前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹2 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
生擒小朵拉17 分钟前
STM32添加库函数
java·javascript·stm32
tuokuac31 分钟前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼35 分钟前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少1 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.1 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者1 小时前
web 网页数据传输处理过程
前端
非凡ghost1 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
w2sfot2 小时前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript