defineprops setup

### 正确设置 Vue 3 中的 `defineProps` `defineProps` 是 Vue 3 `<script setup>` 语法糖中的一个重要功能，用于声明组件接收的属性（props）。通过它，可以定义 props 的名称、类型以及可选的验证规则。 以下是关于如何正确设置 `defineProps` 的详细介绍： #### 基本用法 可以通过对象字面量的方式定义 props。例如，在子组件中接受两个 prop 属性 `title` 和 `isVisible`[^4]： ```javascript <script setup> import { defineProps } from 'vue'; const props = defineProps({ title: String, isVisible: Boolean }); </script> ``` 上述代码表示该组件会接收两个属性：`title` 类型为字符串，`isVisible` 类型为布尔值。 --- #### 定义复杂类型的 Props 除了基本的数据类型外，还可以指定更复杂的结构化数据类型，并为其添加额外的约束条件。例如，下面的例子展示了如何定义一个具有多种约束的 prop： ```javascript <script setup> import { defineProps } from 'vue'; const props = defineProps({ count: { type: Number, // 数据类型 required: true, // 是否必填 default: 0, // 默认值 validator: (value) => { // 自定义验证器 return value >= 0 && value <= 10; } }, isActive: { type: Boolean, default: false // 提供默认值 } }); </script> ``` 在此示例中，`count` 被严格限定为介于 0 到 10 的整数；如果未传递，则其默认值为 0。而 `isActive` 如果没有被显式赋值，默认情况下会被设为 `false`[^3]。 --- #### 使用 TypeScript 设置强类型化的 Props 当项目采用 TypeScript 开发时，推荐利用泛型来增强类型安全性。借助 `withDefaults` 方法能够更加优雅地处理带有默认值的情况。如下所示： ```typescript <script setup lang="ts"> import { defineProps, withDefaults } from 'vue'; interface Props { message?: string; // 可选参数 } // 结合 withDefaults 设定默认值并保持类型安全 const props = withDefaults(defineProps<Props>(), { message: () => '默认消息' }); console.log(props.message); </script> <template> <div> <p>{{ message }}</p> </div> </template> ``` 这里不仅明确了 `message` 参数的具体含义及其可能取值范围，还自动完成了对其缺失情况下的兜底设定工作[^1]。 --- #### 动态 Prop 验证场景 有时需要基于运行时逻辑动态调整某些字段的行为模式或者有效性判断标准。此时可通过函数形式实现灵活控制： ```javascript <script setup> import { defineProps } from 'vue'; import _ from 'lodash'; function validateArray(value){ return _.isArray(value) && !_.isEmpty(value); }; const props = defineProps({ items:{ type:Array, required:true, validator:validateArray } }) </script> ``` 此片段引入 lodash 工具库辅助完成数组非空校验操作。 --- ### 总结 综上所述，无论是简单的键值映射还是涉及深层次业务需求的设计方案，都可以依靠 `defineProps` 来达成目标。合理运用它的各项配置项有助于构建健壮可靠的前端应用架构。