uni-app vue3 props接收父组件的值，在鸿蒙真机获取不到

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app vue3 props接收父组件的值，在鸿蒙真机获取不到

开发环境 版本号 项目创建方式
Windows mac os 11.4 HBuilderX

示例代码：

父组件

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <childVue name="123" ></childVue>  
    </view>  
</template>

子组件

<template>  
    <view>Child</view>  
    <view>{{name}}</view>  
</template>  
<script setup>  
import {defineProps} from "vue"  
const props = defineProps({  
    name: String,  
});  
console.log("name=" + props.name); // id=10  
</script>  

<style>  
</style>

操作步骤：

使用Dcloud创建出来的 vue3 模板，增加子组件， 传值。
在h5, ios, android 均可以正常获取。

但真机运行到鸿蒙平台无法显示，打印props为{} ,不包含父组件传过来的值

预期结果：

鸿蒙平台子组件 可以正常接收父组件的props

实际结果：

鸿蒙平台子组件接收到父组件的值为 {}

bug描述：

使用Dcloud创建出来的 vue3 模板，增加子组件， 传值。
在h5, ios, android 均可以正常获取。

但真机运行到鸿蒙平台无法显示，打印props为{} ,不包含父组件传过来的值
对应的效果和鸿蒙日志 如附件所示


更多关于uni-app vue3 props接收父组件的值，在鸿蒙真机获取不到的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
7 回复

听了群友的 改为options 的方式， UI上可以显示 props的值。 但是在mounted里面打印 props, 其他平台可以获取到， 鸿蒙平台获取的仍然为{}

更多关于uni-app vue3 props接收父组件的值，在鸿蒙真机获取不到的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个是已知问题，已反馈给华为，后期会修改

收到，谢谢

鸿蒙手机系统升级到Beta3无此问题

我也遇到同样问题了，跟楼主一摸一样

升级手机系统吧

在uni-app中使用Vue 3时，如果你在鸿蒙真机上遇到无法接收到父组件传递的props值的问题，可能是由于多种原因导致的。以下是一些排查和解决的代码示例，帮助你确保props正确传递和接收。

1. 确保父组件正确传递props

首先，确保父组件正确传递了props。以下是一个父组件传递props的示例：

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from Parent');
</script>

2. 子组件接收props

在子组件中，确保你正确地接收了props。以下是一个子组件接收props的示例：

<template>
  <view>{{ message }}</view>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: {
    type: String,
    required: true,
  },
});
</script>

3. 检查鸿蒙真机环境

由于问题发生在鸿蒙真机上，需要确保在真机调试模式下没有其他干扰因素。你可以使用uni-app提供的真机调试功能来查看console日志，确认props是否成功传递。

4. 使用watch或computed监控props变化

如果props在组件加载时未能正确显示，但在后续操作中可能会更新，你可以使用watch或computed来监控props的变化：

<script setup>
import { defineProps, watch, computed } from 'vue';

const props = defineProps({
  message: {
    type: String,
    required: true,
  },
});

// 使用watch监控props变化
watch(() => props.message, (newValue, oldValue) => {
  console.log('Message changed from', oldValue, 'to', newValue);
});

// 或者使用computed计算属性
const displayedMessage = computed(() => props.message);
</script>

5. 检查条件渲染和异步数据

如果父组件传递的props是异步获取的（例如，从API获取），确保在子组件中正确处理了异步数据。你可以在父组件中使用v-if确保数据加载完成后再渲染子组件。

总结

通过上述步骤，你应该能够排查和解决在鸿蒙真机上无法接收到父组件传递的props值的问题。如果问题依旧存在，请检查uni-app和Vue 3的相关文档，以及鸿蒙系统的兼容性问题。同时，确保你的uni-app和依赖库都已更新到最新版本。

回到顶部