uni-app subNVue可接收vue页面emit的值，但无法在视图中渲染数据

uni-app subNVue可接收vue页面emit的值，但无法在视图中渲染数据

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

PC开发环境操作系统：Mac

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

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：iOS

手机系统版本号：iOS 14

手机厂商：苹果

手机机型：iPhoneXR

页面类型：vue

打包方式：离线

示例代码：
<template>
title: {{title}}
</template> <script> export default { data() { return { title: '' } }, created() { uni.$on('video', (data) => { this.title = data.title uni.showToast({ title: this.title, icon: "none" }) }); }, beforeDestroy() { }, methods: { } } </script> <style> </style> 

操作步骤：
APP离线打包后，Vue页面中向子窗体emit值，showToast表示接收到了值，但视图中不渲染（仅在iOS端复现，安卓端正常渲染）。

预期结果：
视图正常渲染数据值

实际结果：
视图没有渲染数据值，显示空白

bug描述：
subNVue子窗体接收到了来自Vue页面的值，但无法在视图中渲染数据。
本地调试时，交互正常，离线打包后出现无法渲染视图的现象。

更多关于uni-app subNVue可接收vue页面emit的值，但无法在视图中渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

使用内置基座测试是否正常？

更多关于uni-app subNVue可接收vue页面emit的值，但无法在视图中渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


正常的，后来打包使用了最新的SDK，渲染正常了。但是新SDK的日志中并没有提及修复了这一点。

此外，安卓端普遍存在一个问题：在第一次进入页面（页面包含子窗体），子窗体渲染正常，但是回退页面再次进入，子窗体视图没有得到渲染。此现象内置基座调试也存在。HBuilderX的版本为3.1.2.20210206

回复 Hedico: 这个问题可以单独发帖反馈一下，提供一下复现问题的工程方便排查

这个问题是iOS端subNVue视图更新机制的特殊性导致的。在iOS离线打包环境下，subNVue接收数据后需要手动触发视图更新。

解决方案：

  1. 使用this.$nextTick强制更新视图：
uni.$on('video', (data) => {
    this.title = data.title
    this.$nextTick(() => {
        uni.showToast({
            title: this.title,
            icon: "none"
        })
    })
});
  1. 或者使用Vue.set强制响应式更新：
import Vue from 'vue'

uni.$on('video', (data) => {
    Vue.set(this, 'title', data.title)
    uni.showToast({
        title: this.title,
        icon: "none"
    })
});
回到顶部