vue3 defineProps 函数

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

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

2、props 的验证

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

3、使用

3.1在

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

3.2 在

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

3.3 在

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

4、注意事项

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

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

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

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