uni-app H5应用中 defineProps的default值无法获取

开发环境	版本号	项目创建方式
Windows	10	HBuilderX

操作步骤：

<script setup>  
    import  {ref,} from "vue"  
    const title = ref('Hel444lo');  
    const props = defineProps({  
        etset:{  
            default:()=>"asd"  
        }  
    })  
    console.log(props.etset)  
</script>

预期结果：

<p>打印出    { "etset":  "asd"}</p>

实际结果：

<p>打印出    { }</p>

bug描述：

<p>在uniapp  使用vue3构建的H5应用里，使用defineProps 创建的props的 default 默认值无法获取，  </p>
<p>使用  {{$props}} 才拿得到</p>

bug1 bug2

ionicwang 1楼•5 天前

不要用setup,换回v2写法就能用了，解决了的话给个感谢哦

htzhanglong 2楼•5 天前

这个埋坑，算bug吧

sinazl 3楼•5 天前

在 uni-app 的 H5 应用中，如果你使用 defineProps 定义组件的 props，并且设置了 default 值，但发现 default 值无法正常获取，可能是由于以下几个原因导致的：

1. Vue 版本问题

defineProps 是 Vue 3 中的特性，确保你使用的 uni-app 项目是基于 Vue 3 的。如果你使用的是 Vue 2，defineProps 是不可用的。

解决方法：

确保你的 uni-app 项目是基于 Vue 3 的。
如果你使用的是 Vue 2，可以使用 props 选项来定义 props，并设置默认值。

2. Prop 未传递

如果父组件没有传递该 prop，default 值才会生效。如果父组件传递了 undefined 或 null，default 值也不会生效。

解决方法：

确保父组件没有传递 undefined 或 null。
如果父组件确实需要传递 undefined 或 null，可以在子组件中手动处理。

3. Prop 类型不匹配

如果 defineProps 中定义的 prop 类型与实际传递的类型不匹配，可能会导致 default 值无法正常应用。

解决方法：

确保 defineProps 中定义的 prop 类型与实际传递的类型一致。
如果 prop 类型是对象或数组，确保传递的是有效的对象或数组。

4. Prop 默认值为函数

如果 default 值是一个函数，确保该函数返回了正确的默认值。

解决方法：

确保 default 函数返回了正确的默认值。

5. uni-app 的 H5 环境问题

在某些情况下，uni-app 的 H5 环境可能会有一些特殊的行为，导致 defineProps 的 default 值无法正常获取。

解决方法：

尝试在 uni-app 的其他平台（如小程序）中测试，看看问题是否依然存在。
如果问题仅在 H5 环境中出现，可以尝试更新 uni-app 版本，或者检查是否有相关的已知问题。

示例代码

以下是一个使用 defineProps 并设置 default 值的示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

const props = defineProps({
  message: {
    type: String,
    default: 'Hello, World!'
  }
});
</script>