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
}
]
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
本文通过实例代码给大家介绍了vue 莹石摄像头直播视频功能，文章还给大家提到了vue h5项目调用手机摄像头录像并上传的功能，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下2022-02-02
这篇文章主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了vue实现滚动条始终悬浮在页面最下方，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
前端插件库之vue3使用vue-codemirror插件的步骤和实例
CodeMirror是一款基于JavaScript、面向语言的前端代码编辑器,下面这篇文章主要给大家介绍了关于前端插件库之vue3使用vue-codemirror插件的步骤和实例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了基于vue.js实现图片轮播效果，vue如何实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了Vue封装数字框组件实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
今天小编就为大家分享一篇vue 返回上一页,页面样式错乱的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论