网站搭建心得体会_网站架设软件_南宁网_成都网站建设系统

前言

使用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中的值。