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

news2024/9/20 12:35:48

你们好,我是金金金。

在这里插入图片描述

场景

我正在使用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里面的回调写的也不对~

解决

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

在这里插入图片描述

在这里插入图片描述

测试

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

总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2077081.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

树数据结构(Tree Data Structures)的全面指南:深度解析、算法实战与应用案例

树数据结构(Tree Data Structures)的全面指南:深度解析、算法实战与应用案例 引言 树数据结构(Tree Data Structures)作为计算机科学中的基石之一,以其独特的层次结构和分支特性,在众多领域发…

Hive SQL

一、基本数据类型 tinyint 1byte 有符号整数 smallint 2byte 有符号整数 int 4byte 有符号整数 bigint 8byte 有符号整数 boolean 布尔类型,true或者false float 单精度浮点数 double 双精度浮点数 decim…

系统数据迁移脱敏方案(word)

数据脱敏工作不仅要确保敏感信息被去除,还需要尽可能的平衡脱敏所花费的代价、使用方的业务需求等多个因素。因此,为了确保数据脱敏的过程、代价可控,得到的结果正确且满足业务需要,在实施数据脱敏时,应从技术和管理两…

stm32之I2C通信协议

文章目录 前言一、I2C通信协议二、I2C硬件电路三、I2C时序基本单元3.1 起始与终止信号3.2 发送与接收一个字节3.3 发送与接收应答 四、I2C时序分析4.1 指定地址写4.2 当前地址读4.3 指定地址读 前言 提示:本文主要用作在学习江科大自化协STM32入门教程后做的归纳总…

刷机维修进阶教程-----紫光展讯芯片修改参数 修复基带 信号的一种步骤解析【二】

上期解析了一款紫光芯片机型 改写参数的步骤。今天来讲解另外一款紫光新机型修改参数的具体步骤。同类紫光展讯 展锐芯片机型可以参考尝试 通过博文了解; 1---紫光芯片机型新款机型改写参数的步骤解析 2----了解同类芯片修改参数的常用步骤 3----列举一些紫光芯片机型开启…

OpenStack常见模块详解

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

“NoSQL数据库技术及其应用”写作框架,软考高级,系统架构设计师

论文真题 随着互联网web2.0网站的兴起,传统关系数据库在应对web2.0 网站,特别是超大规模和高并发的web2.0纯动态SNS网站上已经显得力不从心,暴露了很多难以克服的问题,而非关系型的数据库则由于其本身的特点得到了非常迅速的发展…

Zookeeper的watch机制是如何工作的?

ZooKeeper Watch 概述 ZooKeeper Watch 机制类似于 Java 设计模式中的观察者模式或者监听模式,唯一的不同是不再基于线程间通信,而是基于进程间通信。 ZooKeeper Watch 机制是指,客户端在所有的读命令上告知服务端:这个节点或者…

windows 提权方式汇总

windows 提权 一、土豆(potato)家族提权 原理 土豆提权就是通过 windows 的 COM(Component Object Model,组件对象模型)类。向指定的服务器端口发送 NTLM 认证,捕获认证数据包,并修改数据包内…

【C++】—— 内存管理

【C】—— 内存管理 1 C/C 的内存划分 1.1 C/C 的内存分布1.2 C/C 的内存分布练习 2 C语言 中动态内存管理方式:malloc/calloc/realloc/free3 C 内存管理方式3.1 new / delete 操作内置类型3.2 new 和 delete 操作自定义类型3.2.1 new 和 delete 操作自定义类型基础…

layui栅格布局设置列间距不起作用

layui栅格布局支持设置列间距,只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。   根据layui官网文档的说明,只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示:   但是实际使用…

【MySQL】MySQL 表的增删改查(进阶)

欢迎关注个人主页:逸狼 创造不易,可以点点赞吗~ 如有错误,欢迎指出~ 目录 约束类型 not null 非空 unique 唯一 default 指定默认值 primary key 主键 foreign key 外键 check字句 检查 表设计 确定实体 实体之间的关系 聚合查询 聚合函数…

基于SSM的学生信息管理系统的设计与实现 (含源码+sql+视频导入教程+文档+VISIO图)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的学生信息管理系统12拥有三种角色:学生、教师、管理员 学生:选课、查看已选课程、查看成绩 教师:成绩管理 管理员:课程管理、学生…

ai变声:视频怎么变音?分享6个语音变声器,视频变声不再难!

想过如何让自己的直播内容更吸引人吗?你是否希望通过变声器来打造独特的声音效果?或者,如何用创意声音提升观众的互动体验呢?随着直播行业的不断发展,每位主播都在努力寻找吸引观众的独特方式,而变声器正是…

【电脑使用耳机录音注意事项】

文章目录 电脑音设置 电脑音设置 打开声音设置:右键小喇叭 → 选择“声音(S)”→选择 “录制”: 选择 “阵列麦克风” 调整声音大小: 音频增强设置

AI大模型编写多线程并发框架(六十二):限流和并发度优化

系列文章目录 文章目录 系列文章目录前言一、项目背景二、第三轮对话-补充异步执行代码三、第四轮对话-增加限流器四、第五轮对话-抽取限流器接口五、第六轮对话-修改并发度三、参考文章 前言 在这个充满技术创新的时代,AI大模型正成为开发者们的新宠。它们可以帮助…

何为MethodHandles?

最近在梳理ThreadPoolExecutor,无意间看到其内部类Worker实现了一个名字叫做AbstractQueuedSynchronizer的抽象类。看到它,我便想起当年为了面试而疯狂学习这个知识点的场景。不过这种临时抱佛脚的行为,并未给我带来即时的收益。也是这次的疯…

基于Java的高校学生工作系统的设计与实现(论文+源码)_kaic

基于Java的高校学生工作系统的设计与实现(论文源码)_kaic 摘 要 本系统为高校学生工作管理系统,系统能够为高校提供便捷的学生信息管理功能。该系统采用 Java 语言编写,系统采用MVC架构进行设计,通过Servlet和JSP等技术实现前后端数据交互和…

【漏洞复现】SuiteCRM responseEntryPoint Sql注入漏洞

免责声明: 本文内容旨在提供有关特定漏洞或安全漏洞的信息,以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步,并非出于任何恶意目的。阅读者应该明白,在利用本文提到的漏洞信息或进行相关测…

基于UDS的Flash 刷写——BootLoad刷写流程详解

从0开始学习CANoe使用 从0开始学习车载测试 相信时间的力量 星光不负赶路者,时光不负有心人。 目录 流程概述UDS流程详解释前编程①诊断会话控制 - 切换到扩展会话(10 03)②例程控制-预编程条件检查(31 01 02 03)③DTC…