如何在 defineProps 中设置本地默认值？

在 Vue 3 中，defineProps 是用于 Composition API 中定义组件的 props 的一个宏，它在 <script setup> 标签中使用。如果你需要为 props 设置默认值，需要了解 defineProps 是编译时的语法糖，所以它本身不支持直接在函数调用中设置默认值。

但是，你仍然可以通过几种方式来设置默认值：

1. 使用解构和默认值

最直接的方式是在接收 props 的时候使用 ES6 的解构赋值语法来为其提供默认值。这种方式不需要改动 defineProps 的调用，而是在使用 props 的地方处理默认值。

vue
<script setup>
const props = defineProps({
  title: String,
  count: Number
});

const { title = '默认标题', count = 0 } = props;
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

在这个例子中，如果在父组件中没有提供 title 或 count 的值，它们将分别使用 '默认标题' 和 0 作为默认值。

2. 使用 withDefaults 宏

Vue 3.2 引入了一个新的宏 withDefaults，专门用来在 <script setup> 中为 defineProps 设置默认值。这是一个清晰且官方推荐的方式来处理默认值。

vue
<script setup>
const props = withDefaults(defineProps<{
  title?: string;
  count?: number;
}>(), {
  title: '默认标题',
  count: 0
});
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

在这个例子中，withDefaults 用来包裹 defineProps 调用，并且提供一个对象来指明每个 prop 的默认值。这样做不仅使代码更清晰，而且保持了类型安全（如果你在使用 TypeScript）。

总结

虽然 defineProps 本身不直接支持默认值，但通过使用 ES6 的解构赋值或者 withDefaults 宏，我们可以方便地为组件的 props 设置默认值。这确保了组件的灵活性和健壮性，同时保持代码的清晰和维护性。