Vue 3 defineProps() API: 详解 Prop 类型限制

defineProps() 接受所有类型的数据是不完全正确的。

defineProps() 是一个 Vue 3 的 API，用于定义组件的 props 属性。它接受一个对象作为参数，该对象的每个属性都表示一个 prop，并指定该 prop 的类型、默认值、校验函数等。在这个对象中，可以使用 Vue 3 提供的 prop 类型，如 String、Number、Boolean 等，也可以使用自定义的类型。

然而，defineProps() 只能接受特定的数据类型作为 prop，而不是所有类型的数据。例如，如果将一个对象作为 prop，Vue 3 会抛出警告，因为这不是一个有效的 prop 类型。

有效的 prop 类型包括：

• 基本类型：String、Number、Boolean、Array、Object、Symbol、Function、Date 等。
• 自定义类型：可以使用 TypeScript 类型定义自定义类型，并将其用作 prop 类型。
• 任何可以解析为上述基本类型或自定义类型的值。

示例：

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: defineProps({
    name: String,
    age: Number,
    isAdult: Boolean,
    // 自定义类型
    address: Object,
  }),
  // ...
});

总结：

defineProps() 允许您定义组件的 props，并指定每个 prop 的类型。但是，它只接受特定的数据类型作为 prop，例如基本类型、自定义类型或可以解析为这些类型的任何值。如果尝试使用无效的类型，Vue 3 会抛出警告。