vue中的withDefaults用法

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

withDefaults的基本用法：主要是在使用ts中基于泛型类型的声明或者想要确保props有默认值的时候

 

const props = withDefaults(defineProps<{ propData: any; propType?: CountCardType }>(), {

  propData: () => ({

    title: '标题',

    value: 0,

    unit: '单位',

  }),

  propType: () => ({

    titleFiled: 'title',

    valueFiled: 'value',

    unitFiled: 'unit',

  }),

});

在上面的实例中

1、defineProps用于声明组件接受的props及其类型

2、withDefaults包装defineProps,为组件数据设置默认值

注意事项：

withDefaults只能在setup语法糖中可用，不能在传统的选项式API中使用。

默认值只会在props没有被父组件传递时使用。

例子：

 补充小知识：

　　在 Vue 的 props 定义中，type 字段必须使用大写的构造函数（如 String, Number, Boolean 等），不能使用小写。这是因为：

1. Vue 的 props 验证系统是基于 JavaScript 的构造函数实现的

2. 这些构造函数用于运行时类型检查

3. 小写的类型（如 string, number, boolean）是 TypeScript 的类型，只在编译时起作用　　

如果你使用 TypeScript，你可以：

1.使用 TypeScript 类型定义

 2.运行时验证（例如以下几种）