VUE3子组件接受父组件传参props

vue3父组件向子组件传参后，子组件接受参数。函数defineProps。

父组件向子组件传参personlist,代码如下

<template>
    <tstest :list="personList"></tstest>
</template>
<script lang="ts" setup name="app">
    import tstest from './components/tstest.vue';
    import { reactive } from 'vue';
    import {type Persons} from '@/types'
    let personList = reactive<Persons>([
        {id:'001',name:'张三',age:18},
        {id:'002',name:'张三1',age:19},
        {id:'003',name:'张三2',age:20}
    ])
</script>

一、直接接收defineProps

使用defineProps接收后父组件传的key值，及下文钟的list。

<template>
  <div v-for="item in list" :key=item.id>
     {{item.name }}--{{item.age }}
  </div>
</template>

<script lang="ts" setup name="tstest">
    import {defineProps } from 'vue';
    import {type Persons} from '@/types';
    // 1.直接接收
   defineProps(['list'])
</script>

<style>

</style>

二、defineProps接收后+限制类型

<template>
  <div v-for="item in list" :key=item.id>
     {{item.name }}--{{item.age }}
  </div>
</template>

<script lang="ts" setup name="tstest">
    import {defineProps } from 'vue';
    import {type Persons} from '@/types';
    // 1.直接接收
   defineProps<{list:Persons}>()
</script>

三、defineProps接收后+限制类型+设置可传可不传+设置默认值

设置可传可不传用TS的？实现。设置默认值使用withDeafaults实现

    <template>
    <div v-for="item in list" :key=item.id>
        {{item.name }}--{{item.age }}
    </div>
    </template>

    <script lang="ts" setup name="tstest">
        import {defineProps } from 'vue';
        import {type PersonInter ,type Persons} from '@/types';
        let person:PersonInter = {id:'123', name:'zhangsan',age:18}
        // 1.直接接收
        // defineProps(['list'])
        // 2.接受list+限制类型
        // defineProps<{list:Persons}>()
        // 3.接受list+限制类型+限制必要性(?实现)+指定默认值(withDefaults)
        withDefaults(defineProps<{list?:Persons}>(),{
            list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
        })
    </script>

    <style>

    </style>