Vue3：父组件用props给子组件传递数据

本文主要是介绍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给子组件传递数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---