Vue属性的验证

虽然 Vue 可以很容易地向组件添加属性，但有时您需要更多地控制允许添加哪些类型的东西。值得庆幸的是，Vue 提供了内置的方法来将类型检查、验证、默认值和约束添加到你的 prop 定义中。

类型检查

您可以通过添加类型财产给它。

例如，以下组件将可能的输入值限制为数字。

子组件.vue

<template>
  <h2>Numerical Property {{imperfectNumber}}</p>
</template>
<script>
export default {
  props: {
    imperfectNumber: {
      type: Number
    }
  }
}
</script>

父组件.vue

<template>
  <child-component :imperfectNumber="41"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

允许的类型值为：

目的- 只允许对象，例如:myProp="{key: 'value'}".

大批- 只允许数组，例如:myProp=“[1, 2, 3]”.

功能只允许传递函数，例如 *:myProp=“function(test) { return test.toUpperCase() }”。

细绳- 只允许字符串，例如:myProp="'示例'"(或更简单地说，myProp =“示例”)。

数字- 只允许数值，例如:myProp="103.4".

布尔值- 只允许真的要么错误的值，例如:myProp=“真”.

[任何构造函数]- 你也可以传入类或构造函数，它会允许作为这些函数实例的道具。

默认值

您可以通过添加要求：真属性定义的值。

props: {
  imperfectNumber: {
    type: Number,
    required: true
  }
}

或者，您可以为该属性设置一个默认值，如果没有传入任何值，则将使用该默认值。

props: {
  imperfectNumber: {
    type: Number,
    default: 43
  }
}

您甚至可以将其设置为生成动态默认值的函数!

props: {
  imperfectNumber: {
    type: Number,
    default: () => Math.random()
  }
}

自定义验证器

对于更复杂的对象，还可以添加自定义验证器职能。验证器只是一个接受输入属性值并返回布尔值的函数，真的如果有效，错误的否则。

props: {
  imperfectNumber: {
    type: Number,
    validator: value => {
      // Only accepts values that contain the string 'cookie-dough'.
      return value.indexOf('cookie-dough') !== -1
    }
  }
}

通过组合这些属性，您可以稳健地处理用户可能向您的组件抛出的几乎任何值，并使其更易于理解。如果大家想了解更多相关知识，可以关注一下极悦的Java视频，里面的课程内容全面细致，从入门到精通，相信对大家的学习会有所帮助的。