Vue的props组件详解

最新推荐文章于 2025-10-26 16:58:00 发布

原创最新推荐文章于 2025-10-26 16:58:00 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue.js中使用defineProps定义组件属性的类型，如String,Number,Boolean等，并通过default和validator进行默认值和验证规则的设置，确保prop的正确性。示例展示了如何定义age,isVisible和person等prop的详细配置。

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：age、isVisible 和 person。其中，age 是数字类型，必须为正整数且不能超过 120 岁；isVisible 是布尔类型，如果父组件没有传入，则默认为 true；person 是对象类型，如果父组件没有传入，则默认为 { name: 'Tom', age: 20 }。

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