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'

接收数据
四种写法，看需求进行使用

    // 只接收list
    defineProps(['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等