Vue3+Ts Props类型自定义
posted @ 2023-03-15 09:45
当Vue3使用强类型的TypeScript后,props的定义可以有更多姿势。下面就列举一些要点和简单用例。
-
要点
- 像Vue2一样的那些定义自然还是OK的,比如Number、String等等
- 因为有Ts在,Vue3可以有更方便、快捷的复杂类型定义
-
简单用例
比如说现在需要定义一个string[]
的prop,那么就像下面这样写defineProps({ acb: Array as () => string[] })
同样地,如果想定义一个类似
{name: string, age: number}
这样的,可以如下这样写defineProps({ abc: Object as () => ({name: string, age: number}) })
当然,你也可以把类型分离出去,像这样
type TAbc = { name: string age: number } defineProps({ abc: Object as () => TAbc })
函数自然也是可以的,可以像这样
import {PropType} from "vue"; type TFunction = (args?: string[]) => string defineProps({ abc: Function as PropType<TFunction> })
这里使用了vue提供的
PropType
,前面提到的那几个定义使用PropType来实现当然也是可以的
更新:进阶姿势
除了继承自JavaScript阶段风格的定义,还可以使用更丰富的定义
-
defineProps泛型,详细见 针对类型的 props/emit 声明
待补充。。。 -
使用withDefaults声明默认值,详细见 使用类型声明时的默认 props 值
待补充。。。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步