vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3绑定props默认值

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

总结

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

您可能感兴趣的文章:
阅读全文