uni-app 同一个组件在多个页面复用 某个页面调用组件触发了其它页面响应
uni-app 同一个组件在多个页面复用 某个页面调用组件触发了其它页面响应
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 19042.1288 | HBuilderX |
| Android | Android 11 | |
| 小米 | 红米 K30 Ultra | |
| 页面类型 | ||
| vue | ||
| 打包方式 | 云端 |
示例代码:
//page1.vue
< imgSelector :showSelector.sync="selectorShow" @getUrl="upload_handle" targetType="vin" ></imgSelector >
//page2.vue
< imgSelector :showSelector.sync="selectorShow" @getUrl="upload_handle" targetType="car" ></imgSelector >
之后在page2中调用组件,并用组件触发事件,page1中的组件也会被触发事件
操作步骤:
同一个组件在多个页面复用,从某个页面调用组件,触发的事件其他页面接收!这算是bug吗?vue没遇到过这种情况
预期结果:
组件在哪个页面,就只在当前页面触发事件
实际结果:
同一个组件在多个页面复用,从某个页面调用组件,触发的事件其他页面接收
bug描述:
同一个组件在多个页面复用,从某个页面进入组件,触发的事件其他页面接收!这算是bug吗?vue没遇到过这种情况
更多关于uni-app 同一个组件在多个页面复用 某个页面调用组件触发了其它页面响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html
两年了,没人解决这个问题吗?我特么也遇到了
更多关于uni-app 同一个组件在多个页面复用 某个页面调用组件触发了其它页面响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html
提供下你的具体版本和平台信息
回复 YUANRJ: vue-cli搭建, “@dcloudio/uni-mp-alipay”: “^2.0.1-alpha-36820221027001”, HBuilderX:3.7.3.20230223, 我现在把这个公共组件完全复制一份出来,分别在两个页面使用,它竟然还能触发到另一个页面的事件
回复 7***@qq.com: 升级一下依赖的版本再试试
回复 YUANRJ: 升级到2.0.2-alpha-3070620230227001,还是不行
回复 7***@qq.com: 支付宝小程序平台是吧
回复 7***@qq.com: 我这测试未复现此问题,请提供一下测试工程。
回复 YUANRJ: 下面评论我添加的demo附件,麻烦查看下
回复 YUANRJ: 问题其实已经明确了,就是这个uni.getRecorderManager()是全局的,每一次组件组件挂载,onstop钩子总是被覆盖到最新的页面上,导致里面的方法回调总是指向新页面,该如何去避免这个问题呢
HBuilderX3.7.3.20230223未复现此问题
测试平台:小程序开发者工具 - 钉钉应用 - 真机调试。 操作步骤:
默认进入页面homeA,点击录音 - 点击停止录音 - 触发成功方法on-success,页面A接收成功,打印homeA:handleRecordSuccess ;
点击去往页面homeB,点击录音 - 点击停止录音 - 触发成功方法on-success,页面B接收成功,打印homeB:handleRecordSuccess ;
返回页面A,再次点击录音 - 点击停止录音 - 触发成功,页面A未接收到成功回调,但页面B接收到成功回调,打印homeB:handleRecordSuccess;
以上,麻烦帮忙看看。
解决了,不在mounted里初始化录音,每次点击录音时初始化录音没事了
这边也出现了类似的问题,单页面多次使用同一个组件,渲染会错位,跳转事件也错位,使用不同名称注册也有问题,不知道大家有遇到吗?
import iconTag1 from ‘@/components/iconTag/iconTag.vue’
import iconTag2 from ‘@/components/iconTag/iconTag.vue’
这是典型的组件事件监听未正确销毁的问题。在uni-app中,当多个页面使用同一个组件时,如果事件监听没有在页面销毁时正确移除,会导致事件在多个页面间串扰。
问题原因:
- 组件内部可能使用了全局事件总线或全局状态管理
- 组件的事件监听在页面切换时没有正确销毁
- 组件可能使用了
uni.$on等全局事件监听,但没有在页面销毁时使用uni.$off移除
解决方案:
- 检查组件内部事件监听:
// 组件内部避免使用全局事件
// 错误示例
uni.$on('someEvent', this.handleEvent)
// 正确做法:使用组件自身的生命周期
export default {
mounted() {
// 组件内部事件监听
},
beforeDestroy() {
// 清理事件监听
uni.$off('someEvent', this.handleEvent)
}
}
- 确保页面销毁时清理:
// 在页面中使用组件时
export default {
onUnload() {
// 页面卸载时清理可能存在的全局事件
uni.$off()
}
}

