验证VueProps类型，这几种方式你可能还没试用过！

vue 要求任何传递给组件的数据，都要声明为 props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。

这节课我们来看下这个验证机制，它可以帮助我们在开发和调试过程中减少 but，增加我们的自信心(摸鱼时间)。

基础

原始类型

验证基本类型比较简单，这里我们不过多的介绍，直接看下面例子：

export default {
  props: {
    // Basic type check
    //  ("null "和 "undefined "值允许任何类型)
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传的参数
    propC: {
      type: String,
      required: true
    },
    // 默认值
    propD: {
      type: Number,
      default: 100
    },
  }
}

复杂类型

复杂类型也可以用同样的方式进行验证。

export default {
  props: {
    // 默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从
      // 一个工厂函数返回。该函数接收原始
      // 元素作为参数。
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 数组默认值
    propF: {
      type: Array,
      default() {
        return []
      }
    },
    // 函数默认值
    propG: {
      type: Function,
       // 不像对象或数组的默认值。
      // 这不是一个工厂函数 
      // - 这是一个作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
}

type 可以是以下之一：

• Number
• String
• Boolean
• Array
• Object
• Date
• Function
• Symbol

此外，type​ 也可以是一个自定义的类或构造函数，然后使用 instanceof 进行检查。例如，给定下面的类：

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}

我们可以把 Person​ 作为一个类型传递给 prop 类型:

export default {
  props: {
    author: Person
  }
}

高级验证

validator 方法

Props  支持使用一个 validator  函数。这个函数接受 prop 原始值，并且必须返回一个布尔值来确定这个 prop 是否有效。

prop: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    }

使用枚举

有时我们想把值缩小到一个特定的集合，这可以通过枚举来实现：

export const Position = Object.freeze({
  TOP: "top",
  RIGHT: "right",
  BOTTOM: "bottom",
  LEFT: "left"
});

它可以导入 validator 中使用，也可以作为默认值:

最后，父级组件也可以导入并使用这个枚举，它消除了我们应用程序中对魔法字符串的使用:

布尔映射

布尔类有独特的行为。属性的存在或不存在可以决定 prop 的值。

TypeScript

将Vue的内置 prop 验证与 TypeScript相结合，可以让我们对这一机制有更多的控制，因为TypeScript原生支持接口和枚举。

Interface

我们可以使用一个接口和 PropType 来注解复杂的 prop 类型。这确保了传递的对象将有一个特定的结构。

枚举

我们已经探讨了如何在 JS 中伪造一个枚举。这对于TypeScript来说是不需要的，它本向就支持了：

Vue 3

上述所有内容在使用 Vue 3与 选项API 或 组合API 时都有效。区别在于使用 

或者在使用 TypeScript 的 

或者使用一个接口:

最后，在使用基于类型的声明时，声明默认值。

总结

随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。

分享文章：验证VueProps类型，这几种方式你可能还没试用过！
本文地址：http://www.csdahua.cn/qtweb/news5/330955.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网