uni-app 全局自定义事件 nvue页面跳转后监听失效

uni-app 全局自定义事件 nvue页面跳转后监听失效

测试过的手机

  • iphone 12 pro max
  • vivo

示例代码

uni.$emit('update',{msg:'页面更新'}) uni.$on('update',function(data){}) app nvue跳转nvue页面

操作步骤

uni.$emit('update',{msg:'页面更新'}) uni.$on('update',function(data){}) app nvue跳转nvue页面

预期结果

  • 全局监听应一直有效

实际结果

  • nvue 创建监听 打开 新的nvue页面 再返回 监听就失效了

bug描述

全局自定义事件，uni.$emit(‘update’,{msg:‘页面更新’}) uni.$on(‘update’,function(data){})

  • nvue第一次onload 创建 uni.$on监听 可以接收到，更新数据
  • 只要打开一个nvue 页面再返回，监听就会失效，跳转vue页面再返回监听不会失效

| 开发环境 | 版本号       | 项目创建方式 |
|----------|--------------|--------------|
| Mac      | macos big sur 11.4 | HBuilderX    |
|          |              |              |
|          |              |              |

更多关于uni-app 全局自定义事件 nvue页面跳转后监听失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

没发现此问题，可以提供一个demo供测试一下吗

更多关于uni-app 全局自定义事件 nvue页面跳转后监听失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大哥你回复一下我的提问可以吗？？？？？？？？？？？？？？？

多写 几个预加载在页面 多写，然后在nvue界面监听全局参数 打开跳转 关闭 这样测试 监听就会失效

回复 jch2021: 预加载的页面，只在第一次调用 preLoad 的时候触发 onLoad 生命周期，后续不再触发

这是一个已知的 nvue 页面生命周期管理问题。nvue 页面在跳转后返回时，页面实例可能被重新创建，导致之前注册的全局事件监听器失效。

原因分析： nvue 页面使用原生渲染，其生命周期管理与 Vue 页面不同。当 nvue 页面进入后台再返回时，页面实例可能被销毁并重建，而 uni.$on 注册的监听器绑定在旧的页面实例上，导致失效。

解决方案：

  1. 在页面显示时重新注册监听（推荐）：
// nvue 页面
export default {
    onShow() {
        // 每次页面显示时重新注册监听
        uni.$on('update', this.handleUpdate)
    },
    onHide() {
        // 页面隐藏时移除监听，避免重复监听
        uni.$off('update', this.handleUpdate)
    },
    methods: {
        handleUpdate(data) {
            console.log('收到更新:', data)
        }
    }
}
回到顶部