vue3ts props

在Vue 3中使用TypeScript声明props的方式与Vue 2有所不同。在Vue 3中，可以使用`defineProps()`宏来声明props。有几种不同的用法：

1. 使用字符串数组声明props：

const props = defineProps(['foo'])

这将声明一个`foo`的prop。

2. 使用对象字面量声明props：

const props = defineProps({ 
  title: String, 
  age: Number 
})

这将声明一个`title`和`age`的prop，并指定它们的类型为String和Number。

3. 搭配TypeScript使用类型标注：

const props = defineProps<{ 
  title: String, 
  age?: Number 
}>()

这将声明一个`title`和可选的`age`的prop，并使用类型标注指定它们的类型。

除了以上的声明方式，还可以将多个props绑定到一个对象中，并传递参数：

const prop = { 
  name: 'Asen', 
  age: '20' 
}

然后在模板中使用`v-bind`来绑定这些props：

<Cpn v-bind="prop">

这样可以同时传递多个props给子组件。

对于props的校验，Vue 3提供了一种新的方式，即使用`defineProps()`宏声明props时，可以在对象字面量中添加`validator`函数来进行校验。例如：

const props = defineProps({
  age: {
    type: Number,
    validator: (value: number) => {
      return value >= 18 && value <= 99
    }
  }
})

这样可以对`age`的值进行自定义的校验。

综上所述，以上是在Vue 3中使用TypeScript声明props的方式和一些相关的用法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3+ts深入组件（一）Props](https://blog.csdn.net/Wps1919/article/details/127980081)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]