📒 笔记文档

props作用

用于父组件给子组件传递参数。

1.只接收不做限制

​ 父可以传一堆给子，子可以不要

//父
<Person a=1 :list="personList" />
let personList:Array<PersonInter> = [
    {id:"001", name: '张三', age: 18},
    {id:"002",name: '李四', age: 20},
    {id:"003",name: '王五', age: 22}
]

//子
import {defineProps} from 'vue'
let x = defineProps(['a','list','b']) //这里子接收了父没有传的b,子拿到的是无。
let persons = x.list//这种方式就能拿到父传过来的数据进行一些业务操作 

1.做了类型限制。

//父
<Person :a="a" :list="personList" />
let a = 1;
let personList:Array<PersonInter> = [
    {id:"001", name: '张三', age: 18},
    {id:"002",name: '李四', age: 20},
    {id:"003",name: '王五', age: 22}
]

//子
import { withDefaults } from 'vue'
import {type PersonInter} from '@/types'
defineProps<{list:Array<PersonInter>,a:number，b?:string}>() //加了?父可以不传 

//如果父没传，子需要默认值
withDefaults(defineProps<{list:Array<PersonInter>,a:number,b?:string}>(),{
	b:'123'
})