TS定义组件Props的类型与默认值方式
作者：滴滴出行~
这段文章主要介绍了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
}
]
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。