defineProps使用

defineProps宏函数不用引入直接使用

当父组件给子组件传list值时，父组件写法

<template>
    <Person :list="personList"/>
</template>

<script lang="ts" setup name="App">
import Person from "./components/Person.vue";
import { ref, reactive } from "vue";
import { type Persons } from "@/types";
let personList = reactive<Persons>([
    {id:'1',name:'张三',age:18},
    {id:'2',name:'张三2',age:18},
    {id:'3',name:'张三3',age:18, tel:'18221'},
])
</script>

子组件进行接收

// defineProps宏函数不用引入直接使用
import { withDefaults } from 'vue';
import { type Persons } from '@/types';

// 只接收list
defineProps(['list'])

// // 接收list + 限制类型
defineProps<{list:Persons}>()

// 接收list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{list:Persons}>(),{
  list:()=>[{id:'1',name:'zhang',age:19}]
})