像专业人员一样验证你的VueProps

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

让我们来探讨一下这个强大的工具，它可以帮助我们在开发和调试过程中减少错误并增加我们的信心。

一、基础知识

1.1 原始类型

验证原始类型就像为原始类型构造函数设置类型选项一样简单。

export default {
  props: {
    // Basic type check
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
  }
}

1.2 复杂类型

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

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

类型可以是以下值之一：

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

另外，type 也可以是自定义类或者构造函数，断言会通过 instanceof 检查。例如，给定以下类：

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

你可以像这样把它作为一个 props 类型。

export default {
  props: {
    author: Person
  }
}

二、高级验证

2.1 验证器函数

props 支持使用一个验证器函数，这个函数接受 props 的原始值，并且必须返回一个布尔值来确定这个 props 是否有效。

// 自定义验证器函数
prop: {
  validator(value) {
    // 该值必须与这些字符串之一匹配
    return ['success', 'warning', 'danger'].includes(value)
  }
},

2.2 使用枚举

有时你想把数值缩小到一个特定的集合，这可以通过伪造这样的枚举来实现：

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

可以在验证器中导入和使用，也可以作为默认值。

最后，父组件也可以导入和使用这个枚举，从而消除我们应用程序中魔术字符串的使用。

2.3 布尔型投射

布尔 prop 具有独特的行为，属性的存在与否可以决定prop值。

三、TypeScript

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

3.1 Interfaces

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

3.2 真实枚举

我们已经探索了如何在 Javascript 中伪造枚举。这对于 TypeScript 来说是不需要的，因为枚举是原生支持的。

四、Vue 3

当使用带有 Options 或 Composition API 的 Vue 3 时，以上所有内容都有效。不同之处在于使用 

或者当使用带有 

或使用接口：

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

结束

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

原文：https://fadamakis.medium.com/validating-your-vue-props-like-a-pro-5a2d0ed2b2d6作者：Fotis Adamakis

文章题目：像专业人员一样验证你的VueProps
转载来源：http://www.mswzjz.cn/qtweb/news30/329880.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

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