Vue3 props

组件与组件之间不是完全独立的，而是有交集的，组件与组件之间可以传递数据，通过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>