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

14 回复

两年了,没人解决这个问题吗?我特么也遇到了

更多关于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中,当多个页面使用同一个组件时,如果事件监听没有在页面销毁时正确移除,会导致事件在多个页面间串扰。

问题原因:

  1. 组件内部可能使用了全局事件总线或全局状态管理
  2. 组件的事件监听在页面切换时没有正确销毁
  3. 组件可能使用了uni.$on等全局事件监听,但没有在页面销毁时使用uni.$off移除

解决方案:

  1. 检查组件内部事件监听:
// 组件内部避免使用全局事件
// 错误示例
uni.$on('someEvent', this.handleEvent)

// 正确做法:使用组件自身的生命周期
export default {
  mounted() {
    // 组件内部事件监听
  },
  beforeDestroy() {
    // 清理事件监听
    uni.$off('someEvent', this.handleEvent)
  }
}
  1. 确保页面销毁时清理:
// 在页面中使用组件时
export default {
  onUnload() {
    // 页面卸载时清理可能存在的全局事件
    uni.$off()
  }
}
回到顶部