TS定义组件Props的类型与默认值方式
更新时间：2026年05月31日 10:38:32 作者：滴滴出行~
这段文章主要介绍了Vue.js中定义组件props的三种方法,包括直接定义默认值、通过defineProps传递纯类型参数以及使用withDefaults编译器宏来声明props类型,适合Vue.js开发者参考
今天在开发中，突然想到，平时定义组件的props时，在引入了ts后，常用于定义他的类型或者默认值，看了一下官方文档，对组件props的定义提供了几种方法。
官网地址
Vue.js - 渐进式 JavaScript 框架 | Vue.js
三种用法
用法1
只定义默认值，直接使用defineProps就可以
const props = defineProps({
options: {
type: Array,
default: () => [{ label: '男', value: 1 }]
}
})用法2
针对类型的 props声明，props 可以通过给 defineProps 传递纯类型参数的方式来声明。
具体写法如下：
// 2.defineProps<泛型参数>()的方式 没办法做默认赋值
type propsType = {
options: {
label: string
value: string | number
}[]
}
const props = defineProps<propsType>()用法3
使用类型声明时的默认 props 值，vue官方为我们提供了withDefaults 编译器宏。
具体写法如下：
// 3.withDefaults 编译器宏 泛型加默认值
type propsType = {
options: {
label: string
value: string | number
}[]
}
const props = withDefaults(defineProps<propsType>(), {
options: () => [
{
label: '男',
value: 1
}
]
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了在配置了mock数据之后在线上环境使用,主要通过在main.ts文件中注册和vite.config.ts文件夹中配置插件来实现,感兴趣的可以了解一下2025-01-01
冒泡事件处理是由内而外发生的,例如有两个父子div,给他们分别写上点击事件,点击子div先响应的是子div,再是父div,下面这篇文章主要给大家介绍了关于vue项目遇见事件冒泡该如何处理的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了vue实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了VUE子组件的watch不被触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vuejs第十一篇之slot内容分发组件详解的相关资料2016-09-09
Vue.js 中组件间通信的方法有很多种,这篇文章主要为大家详细介绍了6种常见的直接或间接的组件传值方式,有需要的小伙伴可以参考一下2024-01-01
这篇文章主要介绍了vue中的父子传值双向绑定及数据更新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了详解基于Vue/React项目的移动端适配方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue监听路由变化的几种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
下面小编就为大家分享一篇vue 页面加载进度条组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论