在 vue2 中我们使用选项中的 props 来接受父组件传递过来的数据；那在 vue3 的 setup 中，我们使用 defineProps 来定义父组件传递过来的数据

1、defineProps 支持的类型有：String、Number、Boolean、Object、Array、Function，除此之外还支持很多高级类型，如：枚举类型、对象类型、联合类型

2、props 的验证

type: 定义数据的类型
reqiured: 是否必须
default: 默认值
validator: 自定义验证

3、使用

3.1在 <script setup> 中使用

<template><div>{{ msg }} - {{ name }} - {{ age }}<button @click="() => onClick()">点击事件</click></div>
<template><script setup>
// defineProps 返回一个对象，可以定义任意的变量去接收这个对象// 方式1： 以对象的形式去接收
const props = defineProps({name: String,age: {type: Number,default: 10,reqiured: true,validator: (val) => val > 10},msg: {type: String,default: () => 'this is a default msg'},onClik: Function
})
// props.age = 18 // 报错，注意 defineProps 中的属性只读不能修改// 方式2： 以数组的方式去接收
const childProps = defineProps(['name', 'age', 'msg', 'onClick'])
</script>

3.2 在 <script lang="ts" setup> 中使用，无默认值

<template><div>{{ msg }} - {{ name }} - {{ age }}<button @click="() => onClick()">点击事件</click></div>
<template><script lang="ts" setup>// 采用 ts 声明无默认值interface ChildPropsType {name: stringage: numbermsg: stringonClick: () => void
}const props = defineProps<ChildPropsType>()
</script>

3.3 在 <script lang="ts" setup> 中使用，有默认值

<template><div>{{ msg }} - {{ name }} - {{ age }}<button @click="() => onClick()">点击事件</click></div>
<template><script lang="ts" setup>// 采用 ts 声明有默认值；由于接口不能设置默认值，所以要使用 withDefaults 编译宏来实现interface ChildPropsType {name: stringage: numbermsg: stringonClick: () => void
}const props = withDefaults(defineProps<ChildPropsType>(), {name: 'bob',age: 17,msg: 'this is a default msg'
})
</script>

4、注意事项

① defineProps 只能在 setup 中使用，且只能在 setup 的顶层使用，不能在局部作用域使用

② 和 vue2 一样，defineProps 里的属性只读，不能修改

③ defineProps 是 vue3 的一个宏函数，不需要导入就可以直接使用

④ defineProps 函数返回一个对象，是一个 proxy ，所有的特性和 reactive 基本相同，可以直接在模版上进行使用