VUE3 defineProps

defineProps一个宏函数，用于显式声明组件接受的props,可以明确指定组件需要接收的props，并对传入的props进行类型检查和默认值设置。

通过使用defineProps函数来定义props，可以更好地支持响应式，使得父组件对props的修改可以自动触发子组件的更新。

在组件的setup函数中，defineProps可以接收一个对象作为参数，对象的键是props的名称，值是props的类型或者是一个包含类型、默认值等信息的对象。defineProps返回的props对象是一个proxy对象，它的特性和reactive对象基本相同，但由defineProps定义的props对象的值是只读的。在模板中可以直接使用props对象的属性。

defineProps  只能是要么使用`运行时声明`，要么使用`typescript类型声明`。同时使用两种声明方式会导致编译报错。；
defineProps、withDefaults 是只在 <script setup> 语法糖中才能使用的编译器宏。它不需要导入且会随着 <script setup> 处理过程一同被编译掉。

withDefaults 只能与基于类型的defineProps声明一起使用；

父组件

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

<script setup lang="ts">
import Props from './components/props.vue';
import { ref } from 'vue';
const personList = ref([
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 20 },
  { id: 3, name: '王五', age: 22 }
])
</script>

子组件，运行时声明

<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>
        <h2>{{ o.name }}</h2>
        <h2>{{ s }}</h2>
    </div>
</template>
<script lang="ts" setup>
    const res = defineProps({
        list: {
            type: Array,  // 参数类型
            required: true, // 是否必传，默认是false
            default: [{id: 6, name: '赵六', age: 18},], // 默认值，可写函数形式，也可直接写值
            validator: (val: any) => { // 除了验证是否符合type的类型，此处再判断该值结果是否符合验证
                return val.length > 0
            }
        },
        o: {
            type: Object,
            default: {name: '赵六', age: 18}
        },
        s: {
            type: String,
            default: 'hello'
        }
    })
    console.log(res.list, res.o, res.s)
</script>

子组件声明了的 props ，没有定义默认值，若父组件未传，则该值为 undefined 

 TS类型声明的方式1：defineProps 单独使用该api，只能设置是否必传和参数类型。（利用TS特性）

<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>
        <h2>{{ o.name }}</h2>
        <h2>{{ s }}</h2>
    </div>
</template>
<script lang="ts" setup>
    // ts类型声明
    const res = defineProps<{
        list: Array<{id: number, name: string, age: number}>,
        o: {name: string, age: number}
    }>()
    console.log(res.list, res.o)
</script>

类型声明的方式2：在类型方式1的基础上，增加了设置 prop 默认值

<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>
        <h2>{{ o.name }}</h2>
        <h2>{{ s }}</h2>
    </div>
</template>
<script lang="ts" setup>
    // ts类型声明，加默认值    
    const res = withDefaults(defineProps<{
        list: Array<{id: number, name: string, age: number}>,
        o?: {name: string, age: number}
        s?: string
    }>(),{
        list: () =>[{id: 6, name: '赵六', age: 18},], //必须写成函数
        o: () => ({name: '赵六', age: 18}),
        s: 'hello'
    })
    console.log(res.list, res.o)
</script>

本文参考文章：【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults | ts类型限制、默认值设置_vue3 withdefaults-CSDN博客