defineProps 怎么使用的 vue3 解构

`defineProps` 是 Vue 3 中用于组件属性声明的一个函数，它允许你在组件中预先定义接受的props (properties)。通过这种方式，你可以控制父组件如何向子组件传递数据，同时也能提供默认值、类型检查以及文档注释。

当你在子组件的 `setup` 函数中使用 `defineProps` 时，语法通常是这样的：

import { defineProps } from 'vue';

export default {
  props: {
    // 定义props及其选项
    name: {
      type: String, // 可选，默认字符串类型
      required: true, // 是否必填
      default: 'John Doe', // 默认值
      description: '用户的姓名' // 文档描述
    },
    age: {
      type: Number,
      default: 25,
      validator: (val) => val >= 0, // 自定义验证规则
      alias: 'userAge', // 别名
    }
  }
};

然后在父组件里使用这个子组件时，像这样传入相应的属性值：

<ChildComponent :name="parentName" :age="parentAge" />

或者简化为：

<ChildComponent :userAge="parentAge" /> <!-- 如果用了别名 -->