vue3 + ts withDefaults(defineProps＜xxx＞(),{...})和defineProps＜xxx＞区别

最新推荐文章于 2025-09-17 15:43:57 发布

原创最新推荐文章于 2025-09-17 15:43:57 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了withDefaults API如何为defineProps提供默认值，并通过实例展示了如何在子组件中使用它。同时，对比了defineProps的特性，重点讲解了如何在父组件中传递属性。

withDefaults(defineProps(),{…})

withDefaults
作用是给defineProps绑定默认值的api

// -----子组件-----
// 定义ts类型
interface UploadFileProps {
	imageUrl: string;
	id?: string;
	uploadStyle?: { [key: string]: any };
}
// 接受父组件参数    tip: 定义变量props,变量名不一定非得是props
const props = withDefaults(defineProps<UploadFileProps>(), {
	id: "upload",
	uploadStyle: () => ({ width: "130px", height: "130px" })
});

在这里插入图片描述

// -----父组件-----
<UploadImg
	v-model:imageUrl="drawerData.rowData!.avatar"
	:upload-style="{ width: '130px', height: '130px' }"
	// id="upload" ---父组件不设置id，可以在
	// withDefaults(defineProps<xxx>) 中xxx配置默认值
	@check-validate="checkValidate('avatar')"
>

defineProps()

defineProps() 接收父组件传来的属性，不可以设置默认值

// -----子组件-----
type FixedProp = "left" | "right";
interface ColumnProps {
	prop: string;
	width: number | string;
	fixed: FixedProp;
	search: boolean; 
	searchProps: { [key: string]: any };
	searchInitParam: string | number | boolean | any[]; 
	enum: EnumProps[] | (() => Promise<any>);
	renderHeader: (params: any) => any;
}
// 接收参数
const props = defineProps<{ colSetting: Partial<ColumnProps>[]; tableRef: any }>();