小墨の博客

当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来实现当然也是可以的

本文参考：https://www.cnblogs.com/noah227/p/17171241.html

张小弟之家