You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.2 KiB
59 lines
1.2 KiB
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>
|