组件与组件之间不是完全独立的，而是有交集的，组件与组件之间可以传递数据，通过props属性可以让子组件接收父组件传递过来的数据。

以父组件-App.vue，子组件-Person.vue为例：

将子组件当作HTML中的标签一样，可以设置属性等。

在传递时需要使用:var进行绑定，就是v-bind:var。

结合TS语法，在src/types目录下创建TS文件，定义接口：

// 接口
export interface PersonProps {name: string;age: number;}// 一个自定义类型
export type Persons = Array<PersonProps>;

在组件中导入时需要注意：对于类型的来说，需要使用type进行声明：

import {type Persons } from '@/types/PersonInter';

@表示根目录 - src，从上往下寻找。

父组件内容：

<template><div id="app"><Person :a="3" :list="personList" /></div>
</template><script lang="ts" setup>import Person from './components/Person.vue';import { ref, onMounted, reactive } from 'vue';import {type Persons} from '@/types/PersonInter';let personList = reactive<Persons>([{name: '张三', age: 18},{name: '李四', age: 20},{name: '王五', age: 22}
]);
</script><style scoped>.app {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
</style>

使用接口，需要声明响应式数据时，可以使用reactive<VarType>()，用泛型表示。

子组件内容：

• 仅接收

  <template><div class="person"><ul><li v-for="v in list" :key="v.name">{{ v.name }}, {{ v.age }}</li></ul></div>
  </template><script lang="ts" setup name="Person">
  import { defineProps, withDefaults } from 'vue';
  import {type Persons } from '@/types/PersonInter';defineProps(['list'])
  </script>
  

• 接收 + 限制

  <template><div class="person"><ul><li v-for="v in list" :key="v.name">{{ v.name }}, {{ v.age }}</li></ul></div>
  </template><script lang="ts" setup name="Person">
  import { defineProps, withDefaults } from 'vue';
  import {type Persons } from '@/types/PersonInter';defineProps<{list:Persons}>()
  </script>
  

• 接收 + 限制类型 + 指定默认值 + 限制必要性

  <template><div class="person"><ul><li v-for="v in list" :key="v.name">{{ v.name }}, {{ v.age }}</li></ul></div>
  </template><script lang="ts" setup name="Person">
  import { defineProps, withDefaults } from 'vue';
  import {type Persons } from '@/types/PersonInter';withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{name:'张三',age:18}]
  })
  </script>