第一步：App.vue 中发送数据：
<template>
<Person :list="persons"/> //注意多个的话 中间是没有 , // <Person a = "哈哈中" :list = persons />
</template>
let persons = reactive([
{id:'e98219e12',name:'张三',age:18},
{id:'e98219e13',name:'李四',age:19},
{id:'e98219e14',name:'王五',age:20}
])
第二步：Person.vue 中接收数据 ，接收Person 里面的值的信息
// <ul><li>{ { persons }}</li></ul>
<li v-for=" item in list" :key="item.id"> { { item.name }} </li> // 遍历循环 v-for
<script lang="ts" setup name="Person">
import {defineProps} from 'vue' // 定义一个属性
defineProps(['persons']) // 注意如果多个的话 // defineProps(['a','list'])
</script>
实例函数：
types /index.ts函数：
// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,age:number
}// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>app.vue
<template><Person :list="persons"/>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'import {type Persons} from './types'let persons = reactive<Persons>([{id:'e98219e12',name:'张三',age:18},{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}])
</script>Person.vue
<template>
<div class="person">
<ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul>
</div>
</template><script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'// 第一种写法：仅接收
// const props = defineProps(['list'])// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>
