uni-app中uni.$emit和uni.$on在subnvue中调用失败

uni-app中uni.$emit和uni.$on在subnvue中调用失败

开发环境 版本号 项目创建方式
Windows HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows10

HBuilderX类型：正式

HBuilderX版本号：3.2.12

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：mi8

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```javascript
uni.navigateTo({  
    url: `/pages/course-file/course-video?title=${parentName}&url=${filePath}&courseId=${_this.courseId}&coursewareId=${coursewareId}&fileId=${fileId}&WHETFERLEARN=${WHETFERLEARN}&durtion=${durtion}&startStudyTime=${startStudyTime}`,  
    success() {  
        setTimeout(()=>{  
            uni.$emit("videoInitialize",{query: {  
                title:parentName,  
                url:filePath,  
                courseId:_this.courseId,  
                coursewareId:coursewareId,  
                fileId:fileId,  
                WHETFERLEARN:WHETFERLEARN,  
                durtion:durtion,  
                startStudyTime:startStudyTime   
            }})  
        })  
    }  
})  

//在subNvue中的mounted中调用的  
uni.$on("videoInitialize",function(data){  
    console.log(data)  
    vm.src = data.query.url  
    vm.initial_time = Number(data.query.durtion)  
    vm.data = data.query  
})

操作步骤：

第一次点击进入subnvue页面不可以赋值，第二次可以

预期结果：

第一次也可以

实际结果：

第一次点击进入subnvue页面不可以赋值，第二次可以

bug描述：

uni.$on 调用过程中，从uni.$emit中传过来的值已经可以再uni.$on中的data可以console出来了但是不能赋值 重新进入页面后可以赋值
就是说第一次点击进入页面调用赋值失败 返回在进入就可以了


更多关于uni-app中uni.$emit和uni.$on在subnvue中调用失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

我想咨询下 云打包后功能都无法使用是什么情况！

更多关于uni-app中uni.$emit和uni.$on在subnvue中调用失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不好意思没有遇到过

回复 篮孓: 我之前也没遇到过， 现在才遇到

在 subNVue 中使用 uni.$emit 和 uni.$on 时出现首次调用失败的问题，通常是由于 subNVue 页面的生命周期与父页面的通信时序问题导致的。

问题分析：

  1. 时序问题：当通过 uni.navigateTo 跳转时，subNVue 页面的创建和挂载需要时间。在 success 回调中立即使用 setTimeout 发送事件，可能此时 subNVue 的 uni.$on 监听尚未注册完成。
  2. 作用域隔离：subNVue 运行在独立的 JS 上下文，事件通信机制可能因环境初始化延迟而首次失效。

解决方案：

  1. 延迟事件触发：增加 setTimeout 的延迟时间，确保 subNVue 完成初始化。
    setTimeout(() => {
    uni.$emit("videoInitialize", { query: {...} });
}, 300); // 适当延长延迟
回到顶部