vue-04（深入了解 props：验证、类型和默认值）

深入了解 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>