一介*书生
愿你熬过苦难,依旧努力生活。

在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没有被父组件传递时使用。
posted on 2024-10-14 15:27  一介-_-书生  阅读(1109)  评论(0编辑  收藏  举报