,vue 要求任何传递给组件的数据，都要声明为 props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。,这节课我们来看下这个验证机制，它可以帮助我们在开发和调试过程中减少 but，增加我们的自信心(摸鱼时间)。,验证基本类型比较简单，这里我们不过多的介绍，直接看下面例子：,复杂类型也可以用同样的方式进行验证。,type 可以是以下之一：,此外，type 也可以是一个自定义的类或构造函数，然后使用 instanceof 进行检查。例如，给定下面的类：,我们可以把 Person 作为一个类型传递给 prop 类型:,Props 支持使用一个 validator 函数。这个函数接受 prop 原始值，并且必须返回一个布尔值来确定这个 prop 是否有效。,有时我们想把值缩小到一个特定的集合，这可以通过枚举来实现：,它可以导入 validator 中使用，也可以作为默认值:,最后，父级组件也可以导入并使用这个枚举，它消除了我们应用程序中对魔法字符串的使用:,布尔类有独特的行为。属性的存在或不存在可以决定 prop 的值。,将Vue的内置 prop 验证与 TypeScript相结合，可以让我们对这一机制有更多的控制，因为TypeScript原生支持接口和枚举。,我们可以使用一个接口和 PropType 来注解复杂的 prop 类型。这确保了传递的对象将有一个特定的结构。,我们已经探讨了如何在 JS 中伪造一个枚举。这对于TypeScript来说是不需要的，它本向就支持了：,上述所有内容在使用 Vue 3与 选项API 或 组合API 时都有效。区别在于使用 <script setup>时。props 必须使用 defineProps() 宏来声明，如下所示：,或者在使用 TypeScript 的 <script setup> 时，可以使用纯类型注解来声明 prop:,或者使用一个接口:,最后，在使用基于类型的声明时，声明默认值。,随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">