Dbqb_Study/吴光慧学习笔记/11.4/props.vue

App.vue
<template>
	<Person :list="persons"/>
</template>

<script lang="ts" setup name="App">
import Person from './components/Person2.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>

<style>
</style>


Perspon.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,withDefaults} from 'vue'
import {type PersonInter} from '@/types'

// 第一种写法：仅接收
// const props = defineProps(['list'])

// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:PersonInter[]}>(),{
  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})

//接收list，同时将props保存起来
// let x = defineProps<{list:Persons}>()
console.log(props)
</script>

<style scoped>
.person{
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>