uniapp页面通讯uni.$on监听全局自定义事件和onShow使用报错,this may cause an update error.

最新推荐文章于 2024-05-17 19:38:52 发布
最新推荐文章于 2024-05-17 19:38:52 发布
阅读量520 收藏
点赞数
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68937887/article/details/134126778
版权

16ec67d5893548b58d1d908857af45a8.jpg

4fd3f381e4514f1c9933c703536086e3.jpg af89648226ca451c9522adc6fdb44254.jpg

 f470e0374fe64c9abcc7e5c4cdbf8651.jpg

 

 这里我是想点击发布按钮触发自定义updateindex回到首页让页面刷新，首页里是在onShow里绑定的，触发事件后执行callback。显然第一次点击发布按钮没报错，只输出了一次"执行updateindex"

0f2a70db6b3a40909d1058f6ed0d7bed.jpg

 当我第二次点击的时候就出问题了

800b666bbe5c4476ac86bac41581e6ae.jpg

 这里执行了两次"执行updateindex"，也导致我获取了两次相同的数据并合并到一个数组，遍历的时候key值重复然后报错。

这里是因为我一共点击了两次发布按钮，两次回到首页，onShow也就执行了两次，updateindex也绑定了两次，第一次绑定后并没有移除事件，第二次又在updateindex绑定，所以执行了两次callback,

b1ea1d43df694c538cd2dd2ebf87e360.jpg

 最后我在mounted里面绑定让他只执行一次就解决了，onload也可以

 

*!?
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序wx.navigateTo方法里的events参数使用详情及场景
10-15
在微信小程序开发中，`wx.navigateTo`方法是一个关键的页面跳转函数，它允许开发者从一个页面导航到另一个页面，而无需关闭当前页面。在2.7.3版本中，`wx.navigateTo`增加了一个名为`events`的参数，这个新特性极大...
uniapp打包app自定义开屏页
01-27
这可以通过监听uni-app的生命周期钩子函数，如`onLoad`和`onShow`，在适当的时候执行跳转逻辑。 四、注意事项 1. 优化加载速度：开屏页的加载速度直接影响用户体验，因此应尽量减少开屏页的资源大小，避免影响应用...
uniapp中页面通信的全局事件
xiao_qiang666的博客
04-13 363
【代码】uniapp中页面通信的全局事件。
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑
热门推荐
一起来讨论学习前端技术吧
09-05 2万+
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑
uni.$emit() && uni.$on() 的的使用
最新发布
weixin_42581036的博客
05-17 98
uniapp小程序的路的时候遇到了个坑。
uniapp中使用uni.$emit和uni.$on进行页面通讯传值
hu104160112的博客
06-02 1万+
注意事项 1.uni.emit、uni.emit、 uni.emit、uni.on 、 uni.once、uni.once 、uni.once、uni.off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等 2.使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.on注册监听，onUnload里边uni.on 注册监听，onUnload 里边 uni.on注册监听，onUnload里边uni.off 移除，或者一次性的事件，直接使用 uni.$once 监听 A
uniapp全局监听，页面修改页面 uni.$emit(),uni.on(),uni.off()
weixin_49295874的博客
07-30 1万+
子组件 <template> <view> <text>我是test组件{{title}}</text> <button type="primary" @click="test">按钮传值回调</button> <button type="warn" @click="globleEvent">全局事件订阅</button> <
uniapp(uni.$on)事件监听,在当前页面触发另一页面的方法
SLife4599的博客
03-15 1万+
要执行的页 onLoad(e) { uni.$on('login', (usnerinfo) => { this.ischooseid = usnerinfo.addrsssid; this.ischoose = true; }) }, 一定要记得在离开页面后移除监听事件 onUnload() { // 移除监听事件 uni.$off('login'); }, 要调用的界面’login’名字随便起 uni.$emit('login', {
uniapp全局事件uni.$on，可以不相邻的组件之间传递参数
m0_49714202的博客
12-17 2045
uniapp全局事件uni.$on，可以不相邻的组件之间传递参数
uni-app从0到1.DOC uni-app实现代码
01-10
9. **事件处理、事件绑定、事件传参**：介绍uni-app中的事件系统，包括事件监听和事件传递。 10. **uni-app基础组件和表单组件**：讲解如button、input等基础组件，以及表单组件如form、picker等的使用。 11. **...
uni-app如何页面传参数的几种方法总结
11-21
综上所述，uni-app提供了uni.$emit()和uni.$on()作为页面间通信的一种手段，但需要注意事件触发和监听的时机，以及在必要时使用定时器。在实际开发中，开发者应根据项目的具体需求和复杂性选择最合适的通信方式。
小程序报错解决办法.txt
02-10
网上下载的小程序源码基本都报错，解决办法，以养猫小程序来说，安装搭建教程安装就是用不了，其实主要原因就是宝塔系统没设置好，需要解决办法得下载本资源即可，大部分利用此办法设置后都会没有报错了，亲测养猫小...
uni-app：和原生混合开发-原生触发监听事件和Vue页面监听事件
weixin_41897273的博客
06-05 1893
在uni-app的原生混合开发中，我们经常会遇到原生需要向Vue页面发 送消息的需求，如：刷新页面，消息提醒等； uni-app给我们提供了解决方案 ：全局监听事件，uni-app 原生开发分别通过 DCUniSDKInstance和AbsSDKInstance 实现了全局监听事件。
uniapp中的组件通讯（$emit和$on）
03-07 2848
效果图： 实现代码： bus.js import Vue from 'vue' export default new Vue() component-communication.vue: <template> <view> <page-head title="组件通讯示例"/> <reciver></reciver> <sender></sender>
Uniapp-微信小程序实现全局事件监听并进行数据埋点
flymyd的博客
06-17 1万+
最近接到需求，领导希望使用微信开放平台上免费的We分析进行数据埋点，但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改，笔者奉命进行了技术调研，考虑通过劫持事件的方式来实现捕获特定事件并上传分析平台的功能。需要特别注意的是，微信小程序是不能得到document对象的，$el上挂载的也是undefined，自然也就不能通过全局addEventListener的方式来监听特定事件。在调研中想到可以通过劫持小程序的自定义组件构造器Component()来实现事件的监听。...
uni-app全局监听页面路由变化
yancy_peng的博客
05-26 5041
uni-app全局监听页面路由变化
uniapp onshow 重复执行的问题（已解决）
jack_tyc的博客
09-08 2576
uniapp onshow方法重复执行
uni——小程序：页面栈、页面通讯、uni.$emit()、uni.$on()、uni.$off(‘‘)
努力、拼搏、奋进
04-23 977
uni——小程序：页面栈、页面通讯、uni.$emit()、uni.$on()、uni.$off('')
uni-app watch事件监听三种用法
m0_67392811的博客
03-01 1792
1、普通监听（无法监听到第一次绑定的变化） <input type="text" v-model="userName"/> //监听 当userName值发生变化时触发 watch: { userName (newName, oldName) { console.log(newName) } } 2、普通监听（可监听到第一次绑定的变化） 第一种方式有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，，只有当值改变的时候 才会执行，如果想在第一次绑定的
uniapp返回上一页局部刷新uni.$on
08-30
uniapp提供了`uni.$on`方法来监听自定义事件。该方法可以用于在一个页面中监听其他页面通过`uni.$emit`触发的事件。具体来说，当需要在当前页面返回上一页并进行局部刷新时，可以通过以下步骤实现： 1. 在当前页面的`onLoad`生命周期函数中使用`uni.$on`方法监听自定义事件。例如，可以监听名为"refreshPage"的事件。 2. 在需要进行局部刷新的页面中，在合适的时机（比如点击某个按钮）使用`uni.$emit`方法触发自定义事件"refreshPage"。 3. 当返回到当前页面时，`uni.$on`监听的事件将被触发，可以在事件回调函数中执行局部刷新的操作。 请注意，`uni.$on`和`uni.$emit`方法是uniapp封装的全局事件监听和触发方法，用于实现跨页面的事件通信。同时，对于uniapp的页面跳转，返回上一页可以使用`uni.navigateBack`方法，局部刷新可以根据具体需求在事件回调函数中实现。 参考文献： js uRequestuGetLocationuShowToastuShowLoadinguHideLoadinguShowModaluShowActionSheetuNavigateTouNavigateBackuRedirectTouStartPullDownRefreshuStopPullDownRefreshuLoginuShareuPay 应用生命周期（app.vue中） onLaunch当uni-app 初始化完成时触发（全局只触发一次）onShow当 uni-app 启动，或从后台进入前台显示onHide当 uni-app 从前台进入后台onError当 uni-app 报错时触发onUniNViewMessage对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯onUnhandledRejection对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline） 建议使用onLoad代替created 调接口；使用onReady代替mounted 在任何页面均可以使用vue生命周期，组件中只能使用vue生命周期，页面中推荐小程序的生命周期监听app卸载可以在app.vue文件使用beforeDestroy()tabbar页面没有onUnload()卸载页面的方法，所以app打开之后主页面只会执行一次onLoad，只会执行onShow和onHide，所以如果需要刷新页面，在onShow里初始化或者下拉刷新，如果需要传参，只能使用uni.$emit()。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uniapp笔记和坑](https://blog.csdn.net/weixin_43848576/article/details/107424925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值