在Person.vue中用defineProps接收从App.vue传来的东西
基本类型
App.vue
<template>
<Person a="Hi" b="H"/>
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
</script>
Person.vue
<template>
<div class="person">
<!-- 可以直接打印接收到的a -->
{{ a }}
</div>
</template>
<script lang="ts" setup name = "Person">
import {defineProps} from 'vue'
// 接收a
let x = defineProps(['a', 'b']) // 必须以数组形式接收，不管传入的是1个还是多个
console.log(x)
</script>
<style scoped>
/* 可以添加样式 */
</style>
对象类型
App.vue
<template>
<!-- 加‘:’了就是表达式，是表达式就会执行，这里会读取personList -->
<Person :list="personList"/>
<!-- 但是ref不用加冒号，是特例 -->
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'
import {type Persons} from '@/types'
let personList = reactive<Persons>([
{id:'No1', name:'Jack', age:11},
{id:'No2', name:'Rose', age:12, x:'xx'}, // 如果希望x部分对象有，部分没有，需要在接口增加一个‘?’
{id:'No3', name:'Pete', age:13}
])
console.log(personList)
</script>
<style scoped>
/* 可以添加一些样式 */
</style>
Person.vue
<template>
<div class="person">
<ul>
<li v-for="p in list" :key="p.id"> {{ p.name }} {{ p.age }}</li>
</ul>
</div>
</template>
<script lang="ts" setup name = "Person">
// import {defineProps} from 'vue' //defineXXX 可以不用引入，因为是宏函数
import { type Persons } from '@/types';
// 接收list
withDefaults( // withDefaults()指定默认值
defineProps<{list?:Persons}>(), // 限制person对象的具体属性 问号使得App.vue传不传list过来都不报错
{list:()=>[{id:'1', name:'Logan', age: 299}]}
)
</script>
<style scoped>
/* 可以添加样式 */
</style>
