在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没有被父组件传递时使用。
白日不到处,青春恰自来,苔花如米小,也学牡丹开。