vue-types

一、vue-types

VueTypes 是 Vue.js 的可配置prop 验证器的集合，受到 React 的启发prop-types


1、何时使用​

虽然 Vue.js 中的基本 prop 验证既简单又方便，但细粒度验证在复杂组件上可能会变得冗长。VueTypes 提供了一个紧凑而流畅的界面来定义项目的 props。

 

2、使用示例​

想象一个带有一组 props 的典型 Vue.js 组件：

export default {
  props: {
    id: {
      type: Number,
      default: 10,
    },
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      validator(value) {
        return Number.isInteger(value)
      },
      default: 0,
    },
    nationality: String,
  },
  methods: {
    // ...
  },
}

虽然这个组件工作得很好，但编写大量的 prop 验证对象可能会变得重复。使用 VueTypes 你可以重写相同的 props，如下所示：

 

import VueTypes from 'vue-types'

export default {
  props: {
    id: VueTypes.number.def(10),
    name: VueTypes.string.isRequired,
    age: VueTypes.integer,
    nationality: VueTypes.string,
  },
  methods: {
    // ...
  },
}

 

3、单个验证器导入​

从版本 2.0.0 开始，您可以导入单独的验证器以获得更简洁的语法：

import { number, string, integer } from 'vue-types'

export default {
  props: {
    id: number().def(10),
    name: string().isRequired,
    age: integer().def(0),
    nationality: string(),
  },
  methods: {
    // ...
  },
}

 

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！