Vue3绑定props默认值问题

更新时间：2025年08月30日 13:52:47 作者：水果摊见

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue项目使用electron打包桌面应用方式
本文详细介绍了如何使用Vue3和Electron创建一个桌面应用程序,并提供了一个完整的步骤指南,包括项目初始化、配置、安装依赖、主进程和渲染进程的设置、打包配置以及解决常见问题的方法
2025-12-12
Vuejs实现带样式的单文件组件新方法
这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue.js实现简单动态数据处理
本篇文章主要介绍了Vue.js实现简单动态数据处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
使用vue封装一个自定义样式的滚动条
众所周知,当容器高度固定而内容部分高度超出容器高度时,浏览器会渲染出一个可以滚动并用于显示剩余界面的条 -- 滚动条,它可以简单的样式修改,但是位置是固定的,无法移动,而我们需要改变位置的时候,它就不能满足我们的需求了,这时我们可以自己手写一个
2023-10-10
vue+elementui 实现上传文件/导入文件的功能示例详解
文章介绍了如何使用Vue和Element UI实现上传文件和导入文件的功能,主要内容包括：上传组件的使用、data中的数据存储、methods中的方法（选择文件、点击确定上传文件、删除文件）,文章还提供了相关链接供进一步学习,感兴趣的朋友一起看看吧
2025-03-03
vue3如何通过provide和inject实现多层级组件通信
这篇文章主要介绍了vue3如何通过provide和inject实现多层级组件通信,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
Vue3中如何使用v-model高级用法参数绑定传值
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
Vue源码探究之虚拟节点的实现
这篇文章主要介绍了Vue源码探究之虚拟节点的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
Vue-CLI 3.X 部署项目至生产服务器的方法
这篇文章主要介绍了Vue-CLI 3.X 部署项目至生产服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
9种方法优化jQuery代码详解
本文将详细介绍jQuery代码优化的9种方法,需要的朋友可以参考下
2020-02-02