023、Vue3+TypeScript基础，使用defineProps限制父传子的数据类型，并用v-for显示

01、index.js代码如下:

// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter {
    id: string;
    name: string;
    age: number;
}

export type Persons = Array<PersonInter>;

02、App.vue代码如下：

<template>
  <div class="app">
    <h2>App.Vue</h2>
    <!--    使用了ref来获取子组件的属性-->
    <Person :a1='person' :list1="personList"/>
  </div>
</template>

<script lang="ts" setup name="App">
// JS或TS
import Person from './view/Person.vue'
import type {PersonInter, Persons} from "@/view";

let person: PersonInter = {
  id: 'a0',
  name: 'Joker',
  age: 999,
}

let personList: Persons = [
  {
    id: 'a001',
    name: '张三',
    age: 18,
  },
  {
    id: 'a002',
    name: '李四',
    age: 19,
  }
]
</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

03、person代码如下：

<template>
  <div class="person">
    <h2>{{ a1 }}</h2>
    <ul>
      <!--      一定要加key,如果后端实在没有唯一值，那么才能用index-->
      <li v-for="(item, index) in list1" :key="item.id">
        {{ index }}--{{ item.name }}--{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" name="Person001" setup>
import {defineProps} from 'vue'
import type {PersonInter, Persons} from "@/view";

defineProps<{
  a1: PersonInter;
  list1: Persons;
}>()

</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

04、效果如下;

 05、效果如下：