vue3中的withDefaults

在 Vue 3 中，withDefaults 是一个用于 defineProps 和 defineEmits 的辅助函数，主要用于为组件的 props 设置默认值。这个功能是 Vue 3 的一个新增特性，帮助简化组件的 Props 配置和默认值设置。

withDefaults 的基本用法

withDefaults 函数允许你在 defineProps 中定义 props 的默认值，特别是在使用 TypeScript 或者想要确保 props 有默认值时，它显得特别有用。以下是一个简单的示例：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
  </div>
</template>

<script setup>
import { withDefaults, defineProps } from 'vue';

// 使用 withDefaults 来为 props 设置默认值
const props = withDefaults(defineProps<{
  message?: string;
  count?: number;
}>(), {
  message: 'Hello, Vue 3!',
  count: 0
});
</script>

说明

• defineProps：用于定义组件的 props 类型。
• withDefaults：用于为 defineProps 定义的 props 设置默认值。

在上面的示例中：

1. defineProps 用于声明组件接受的 props 及其类型。
2. withDefaults 包装 defineProps，为 message 和 count props 设置了默认值。

withDefaults 的优势

• 类型安全：如果你使用 TypeScript，这种方式能确保默认值和 props 类型一致，提供更好的类型检查。
• 简化配置：使得默认值的配置更加集中和简洁。

注意事项

• withDefaults 只在 setup 语法糖中可用，不能在传统的选项式 API 中使用。
• 默认值只会在 props 没有被父组件传递时使用。

使用 withDefaults 可以使你的 Vue 3 组件更加灵活和易于维护，特别是当你的组件需要支持不同的配置选项时。