深入了解 props：验证、类型和默认值
Props 是将数据从 Vue.js 中传递给子组件的基本机制。了解如何正确定义、验证和处理 props 对于构建可重用和可维护的组件至关重要。本课将深入探讨 prop 验证的复杂性、不同的 prop 类型以及如何设置默认值，确保你的组件健壮且可预测。
Prop 验证
Prop 验证允许你指定通过 props 传递到组件中的数据的要求。这有助于确保组件收到预期的数据类型和结构，从而防止意外错误并提高代码的可维护性。Vue 提供了一个灵活的系统来定义这些验证规则。
基本验证
prop 验证的最基本形式涉及指定预期的数据类型。你可以通过为 prop 分配一个构造函数（例如，String、Number、Boolean、Array、Object、Date、Function、Symbol）来实现这一点。
<template>
<div>
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<p>Is Active: {{ isActive }}</p>
</div>
</template>
<script>
export default {
props: {
name: String,
age: Number,
isActive: Boolean
}
}
</script>
在此示例中，name prop 应为字符串，age 为数字，isActive 为布尔值。如果父组件传递了错误类型的值，Vue 将在开发过程中在控制台中发出警告。
使用对象进行详细验证
对于更复杂的验证要求，你可以将 props 定义为对象。这允许您指定各种选项，包括：
type：预期的数据类型（与基本验证相同）。required：一个布尔值，指示 prop 是否是必需的。default：如果未提供 prop，则使用的默认值。validator：自定义验证函数。
<template>
<div>
<p>Message: {{ message }}</p>
<p>Priority: {{ priority }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
},
priority: {
type: Number,
default: 1,
validator: function (value) {
return value >= 1 && value <= 5 // The value must be between 1 and 5
}
}
}
}
</script>
在此示例中，message prop 是必需的字符串。priority 属性是一个默认值为 1 的数字和一个自定义验证器函数，可确保该值介于 1 和 5 之间。如果验证失败，Vue 将在控制台中发出警告。
多种可能的类型
有时，一个 prop 可能接受多种数据类型。您可以使用类型数组来指定此项。
<template>
<div>
<p>Input: {{ input }}</p>
</div>
</template>
<script>
export default {
props: {
input: {
type: [String, Number]
}
}
}
</script>
在这里，input prop 可以是字符串或数字。
prop 类型
Vue 支持多种内置的 prop 类型，每种类型都有自己的特性和用例。
基元类型：字符串、数字、布尔值
这些是最基本的数据类型，用于简单值。
<template>
<div>
<p>Name: {{ name }}</p>
<p>Count: {{ count }}</p>
<p>Is Valid: {{ isValid }}</p>
</div>
</template>
<script>
export default {
props: {
name: String,
count: Number,
isValid: Boolean
}
}
</script>
复杂类型：数组、对象
这些用于传递数据集合或结构化数据。当使用 Array 或 Object 时，通常最好提供默认值作为工厂函数，以避免在组件实例之间意外共享数据。
<template>
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
<p>User: {{ user }}</p>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
default: () => [] // Factory function to return a new array for each instance
},
user: {
type: Object,
default: () => ({ name: 'Guest' }) // Factory function to return a new object
}
}
}
</script>
日期类型
Date 类型用于传递日期值。
<template>
<div>
<p>Date: {{ formattedDate }}</p>
</div>
</template>
<script>
export default {
props: {
date: Date
},
computed: {
formattedDate() {
if (this.date) {
return this.date.toLocaleDateString();
}
return '';
}
}
}
</script>
函数类型
Function 类型用于将函数作为 prop 传递。这对于创建高度可配置的组件非常有用，其中父组件可以定义某些作的行为。
<template>
<div>
<button @click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
props: {
onClick: Function
},
methods: {
handleClick() {
if (this.onClick) {
this.onClick();
}
}
}
}
</script>
Symbol类型
Symbol 类型用于传递元件值。
<template>
<div>
<p>Symbol Description: {{ symbol.description }}</p>
</div>
</template>
<script>
export default {
props: {
symbol: Symbol
}
}
</script>
自定义类型
您还可以对 prop 类型使用自定义构造函数。当您具有要强制实施的特定类或对象结构时，这非常有用。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
export default {
props: {
person: Person
}
}
默认值
为 props 提供默认值可以使您的组件更灵活、更易于使用。如果父组件没有传递 prop，则将使用默认值。
静态默认值
对于基元类型，您可以直接分配默认值。
<template>
<div>
<p>Name: {{ name }}</p>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: 'Guest'
}
}
}
</script>
默认值的工厂函数
对于 Array 和 Object 类型，您应该使用工厂函数返回默认值。这可确保每个组件实例都获得自己的数据副本，从而防止意外的副作用。
<template>
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
default: () => []
}
}
}
</script>
使用 null 作为默认值
有时，你可能想明确指出 prop 是可选的，没有默认值。在这种情况下，您可以使用 null 作为默认值。
<template>
<div>
<p v-if="data">Data: {{ data }}</p>
<p v-else>No data provided.</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: null
}
}
}
</script>