本文主要是介绍Vue3：父组件用props给子组件传递数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、情景说明
主要作用和Vue2中的props差不多。就是，父组件给子组件传递数据
但是，Vue3中，props可以结合TypeScript(ts)的泛型，来实现更多的功能。
二、案例
1、ts文件
// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter {id:string,name:string,age?:number //age后面加?，表示，age字段可有可无。不传没关系}// 一个自定义类型 下面两种写法都可以
// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]
2、父组件
创建数据
reactive+ts泛型
import {reactive} from 'vue'import {type Persons} from '@/types'//reactive结合ts泛型使用 vscode中写错字段名会给出提示let personList = reactive<Persons>([{id:'01',name:'张三',age:18},{id:'02',name:'李四',age:20},{id:'03',name:'王五',age:22}])
传递数据
<Person :list="personList"/>
3、子组件
导入依赖
import {withDefaults} from 'vue'import {type Persons} from '@/types'
接收数据
四种写法，看需求进行使用
// 只接收listdefineProps(['list'])// 接收list，同时将props保存起来let x = defineProps(['list'])console.log(x.list)// 接收list + 限制类型defineProps<{list:Persons}>()// 接收list + 限制类型 + 限制必要性 + 指定默认值withDefaults(defineProps<{list?:Persons}>(),{list:()=> [{id:'ausydgyu01',name:'康师傅·王麻子·特仑苏',age:19}]})
注：
在Vue3中，类似defineXxxx这样的函数，属于宏函数，不用import引入到组件中，可以直接使用
例如：defineProps、defineExpose等
这篇关于Vue3：父组件用props给子组件传递数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
