【vue3 <script setup> props 使用与讲解】defineProps、withDefaults 类型限制、默认值设置

  • 本章主要涉及api内容:defineProps、withDefaults;

  • defineProps 只能是要么使用`运行时声明`,要么使用`类型声明`。同时使用两种声明方式会导致编译报错。;

  • defineProps、withDefaults 是只在


例子1 > 运行时声明 的方式只能设置参数类型、默认值、是否必传、自定义验证。报错为控制台warn警告。

若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。


子组件声明了的props ,若父组件未传,则该值为 undefined


例子2 > 类型声明的方式1:defineProps 单独使用该api,只能设置是否必传和参数类型。(利用TS特性)


相较于例子1,该写法只能设置参数类型、父组件对应 prop 是否该必传的功能。

传值有误时,控制台报warn警告,还提供编辑器报错功能。

提供编辑器代码提示的功能。


例子3 >类型声明的方式2:在类型方式1的基础上,增加了设置 prop 默认值


注意:默认值为引用类型的,需要包装一个函数 return 出去。


QQ交流群:522976012 ,欢迎来玩

聚焦vue3,但不限于vue,任何前端问题,究其本质,值得讨论,研究与学习。

你可能感兴趣的:(前端,html,ui,list,数据结构)