[Vue3]绑定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 数组类型
}>();
步调二：设置默认值
使用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中的值。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]