您的位置:首页 > 汽车 > 时评 > uniapp中$off没写正确引发的问题~

uniapp中$off没写正确引发的问题~

2024/9/21 11:13:57 来源:https://blog.csdn.net/qq_45502195/article/details/141558604  浏览:    关键词:uniapp中$off没写正确引发的问题~

你们好,我是金金金。

在这里插入图片描述

场景

我正在使用uniapp开发微信小程序,涉及到几个页面之间的事件通信,采用的是uniapp里面的$on&off来达到页面之间的互相通信
功能如下:有一个选择城市的页面,当选择了某个城市,另外的几个页面左上角会显示当前选择城市的名称 以达到一致的效果
预期结果:选择了哪个城市几个页面都显示具体选择的城市名称
实际结果:当第一次进入页面选择的时候是生效的,此时退出页面在进入页面选择城市发现显示的还是之前选择城市的名称

在这里插入图片描述

在这里插入图片描述

  • 下面贴出核心代码

a.vue代码如下,逻辑很简单,就是在页面挂载的时候监听全局的自定义事件,在组件卸载之前移除全局自定义事件监听器

在这里插入图片描述

b.vue代码如下,跟a.vue一样,就是在页面挂载的时候监听全局的自定义事件,在组件卸载之前移除全局自定义事件监听器

在这里插入图片描述

c.vue代码如下,再点击某个按钮的时候触发一个事件,同时会触发全局的自定义事件,附加参数都会传给监听器回调函数。

在这里插入图片描述

排查

  1. 第一时间肯定是排查下代码,然后在事件里面写输出语句看是不是生命周期钩子写错了导致问题,结果发现:貌似并不是此引发的error

  2. 接着看了看文档,重点看了看uni.$off,因为第一次进入页面选择 触发了事件,第二次就不正常了,是不是这个玩意把监听的卸载了

在这里插入图片描述

重点:看到这里,似乎明白了导致问题的原因是什么了

  1. 如果只提供了事件名(eventName),则移除该事件名对应的所有监听器;我的a.vue里面就只提供了事件名,所以当第一个进入这个组件页面是生效的,当此时退出触发了卸载钩子把该事件名对应的所有监听器全部卸载了,那我其它页面也是用的这个事件名都被卸载了,那当然监听不到了
  2. b.vue里面$on里面的回调写的也不对~

解决

  • 同时提供事件与回调,并且在页面销毁前只移除这个事件回调的监听器,其余几个监听的页面都改成如下形成即可

在这里插入图片描述

在这里插入图片描述

测试

  • 经过多次手动测试,多次选择城市几个页面显示的都是最新选择的城市名称,毫无问题~

总结

监听的时候提供事件与回调,并且移除的时候也一样同时提供相同的事件与回调

  • 编写有误还请大佬指正,万分感谢。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com