Vue3绑定props默认值问题
作者:水果摊见
使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的props数据
前言
使用TS、Vue3组织组件中传入props的通用方式
步骤
步骤1:使用 defineProps 定义 Props
使用interface定义props中各项的类型:
// 组件List.vue // 定义 Props 类型和接口 interface ListItem { name: string; time: string; content: { status: number; name: string; }[]; } // 使用 defineProps 定义 Props const props = defineProps<{ listData?: ListItem[]; // listData 属性为可选的 ListItem 数组类型 }>();
步骤2:设置默认值
使用Vue3中的withDefaults定义props默认值
// 组件List.vue // 定义 Props 类型和接口 interface ListItem { name: string; time: string; content: { status: number; name: string; }[]; } // 使用 withDefaults 设置默认值 const props = withDefaults( defineProps<{ listData?: ListItem[]; // listData 属性为可选的 ListItem 数组类型 }>(), { listData: () => [], // 设置 listData 的默认值为空数组 } );
之后组件中即可使用props.listData
来访问props中的值。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。