引言
在 Vue 3 的组件开发中，合理地设置 Props 的默认值是一项重要任务。本文将介绍如何使用 defineProps 和 withDefaults 来定义和设置 Props 默认值，为您提供便捷的方法。
步骤
步骤 1：使用 defineProps 定义 Props
首先，我们使用 defineProps 函数来定义组件的 Props。通过定义 Props，我们可以明确定义它们的类型和验证规则。
import { defineProps } from 'vue';
// 定义 Props 类型和接口
interface ListItem {
name: string;
time: string;
content: {
status: number;
name: string;
}[];
}
// 使用 defineProps 定义 Props
const props = defineProps<{
listData?: ListItem[]; // listData 属性为可选的 ListItem 数组类型
}>();
在上述代码中，我们引入了 defineProps 函数，并使用它定义了一个 props 对象。我们指定了 listData 属性为可选的 ListItem 数组类型。
步骤 2：使用 withDefaults 设置默认值
接下来，我们使用 withDefaults 函数来设置默认值。这样，在没有传递相应的属性或者传递了未定义的属性时，组件将使用默认值。
import { defineProps, withDefaults } from 'vue';
// 定义 Props 类型和接口
interface ListItem {
name: string;
time: string;
content: {
status: number;
name: string;
}[];
}
// 使用 withDefaults 设置默认值
const props = withDefaults(
defineProps<{
listData?: ListItem[]; // listData 属性为可选的 ListItem 数组类型
}>(),
{
listData: () => [], // 设置 listData 的默认值为空数组
}
);
在上述代码中，我们使用 withDefaults 函数将 defineProps 的结果作为第一个参数，并为 listData 属性设置了默认值为一个返回空数组的函数。
步骤 3：访问 Props 默认值
通过定义和设置默认值后，我们可以在组件中访问 Props 的值，包括它们的默认值。
// 访问 listData 属性
console.log(props.listData); // 输出: []
listData 属性设置了默认值为空数组，因此输出结果是 []。
结论
通过使用 defineProps 和 withDefaults，您可以轻松地定义和设置 Vue 3 组件的 Props 默认值。这种技巧使得组件开发更加灵活和高效。
希望本文对您理解如何设置 Props 默认值有所帮助。如有任何疑问，请随时提出。
