vue3 props 声明数据类型

### Vue3 中声明 Props 数据类型的几种方式

在 Vue 3 中，`props` 是一种用于父子组件间传递数据的方式。为了确保传递的数据符合预期并提高代码的健壮性和可读性，在定义 `props` 时可以为其指定具体的数据类型。

#### 使用 TypeScript 类型定义

当项目采用 TypeScript 开发时，可以直接利用接口或类型别名来严格规定属性结构：

// 定义 Prop 接口
interface MyComponentProps {
    message: string;
}

export default defineComponent({
    props: {
        ...defineProps<MyComponentProps>()
    }
});

#### 利用 JavaScript 对象字面量形式

对于纯 JS 或不涉及 TS 的场景，则可通过对象字面量的形式为每个 prop 明确其期望接收的数据种类[^1]：

const app = createApp({});

app.component('my-component', {
    props: {
        title: String,         // 字符串类型
        count: Number,         // 数值类型
        isActive: Boolean,     // 布尔类型
        items: Array,          // 数组类型
        settings: Object       // 对象类型
    },
    template: `<div>{{title}}</div>`
})

除了上述基本类型外，还可以接受函数(Function)、Symbol 等其他合法的 JavaScript 构造器作为验证依据。此外，也支持自定义校验逻辑以适应更复杂的业务需求[^2]。

例如，可以通过如下方式增加额外约束条件：

props: {
    age: {
        type: Number,
        required: true,            // 是否必填项
        validator(value) {         // 自定义验证规则
            return value >= 0 && value <= 150;
        }
    }
}

这种做法不仅限定了输入范围，同时也增强了程序的安全防护能力。