Vue 3:定义组件属性时，有哪几种默认值设置方式

定义组件script代码片如下script setup langts nameDiagnosis import { diagnosisHmtl } from ../utils/types; interface IdiagnosisProps { diagnosisHmtl?: string; } const props withDefaults(definePropsIdiagnosisProps(), { diagnosisHmtl: () diagnosisHmtl }); /script1.withDefaults 箭头函数当前写法const props withDefaults(definePropsIAbnormalDiagnosisProps(), { abnormalDiagnosisHmtl: () abnormalDiagnosisHmtl });2.withDefaults 直接值const props withDefaults(definePropsIAbnormalDiagnosisProps(), { abnormalDiagnosisHmtl: 默认HTML字符串 });如果默认值是简单字符串/数字可以用这个3. 对象语法Vue 3.4 支持直接在 defineProps 里写 defaultconst props definePropsIAbnormalDiagnosisProps { abnormalDiagnosisHmtl?: string; }();这种需要同时改类型定义不如 withDefaults 简洁4. 运行时默认值TS 不提示const props definePropsIAbnormalDiagnosisProps(); const finalHtml props.abnormalDiagnosisHmtl ?? abnormalDiagnosisHmtl;这种在模板中用props.abnormalDiagnosisHmtl会报 TS 错误除非加!或as string推荐写法 1当前withDefaults 箭头函数工厂 —— 因为值是 import 的复杂 HTML 字符串用函数延迟求值最安全避免引用问题。推荐写法 2如果 HTML 字符串不依赖 import可以直接写死const props withDefaults(definePropsIAbnormalDiagnosisProps(), { abnormalDiagnosisHmtl: p暂无数据/p });