Vue的props组件详解

Vue的props组件详解

javascript">const props = defineProps({
  name: String,
});

String 是在 defineProps() 函数中用来声明 name prop 的类型,表示 name 必须是字符串类型。如果父组件没有传入 name 或传入的 name 不是字符串类型,那么就会产生类型验证错误。

defineProps() 函数支持的数据类型除了 String,还包括以下几种:

  • Number:数字类型,可以是整数或浮点数。
  • Boolean:布尔类型,值为 true 或 false。
  • Object:对象类型,可以是纯粹的对象、函数或数组等。
  • Array:数组类型,可以是任何类型的项组成的数组,也可以是多维数组。
  • null:强制要求 prop 的值必须为 null。
  • undefined:强制要求 prop 的值必须为 undefined。
  • 自定义类型:你可以传递一个自己定义的构造函数,用于验证 prop 的类型是否正确。

此外,还有一些常用的验证规则:

  • required:布尔类型,指定该 prop 是否必须传入。
  • default:设置默认值,在父组件未传入时会使用该值。
  • validator:传入一个自定义的验证函数,用于验证 prop 是否合法。

例如:

const props = defineProps({
  age: {
    type: Number,
    default: 18,
    validator: (value) => value > 0 && value < 120,
  },
  isVisible: {
    type: Boolean,
    default: true,
  },
  person: {
    type: Object,
    default: () => ({ name: 'Tom', age: 20 }),
  },
});

在上面的例子中,我们声明了三个 prop:ageisVisibleperson。其中,age 是数字类型,必须为正整数且不能超过 120 岁;isVisible 是布尔类型,如果父组件没有传入,则默认为 true;person 是对象类型,如果父组件没有传入,则默认为 { name: 'Tom', age: 20 }

总之,在定义 props 时,我们需要考虑 props 的类型、是否必须、默认值和验证规则等,以及如何在组件内部使用这些 props。

转载请说明出处内容投诉
CSS教程_站长资源网 » Vue的props组件详解

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买