在Vue中，我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，例如下面的示例：

<template>
  <div style="margin-top:100px">
    <my-component :propA="100" :propB="'sdf'" :propC="'propC11'" :propD="100" :propE="{a:'a'}" :propF="'warning'"></my-component>
  </div>
</template>

<script type="text/javascript">
import Vue from 'vue'

Vue.component('my-component', {
  props: {
    propA: Number,
    propB: [String, Number],
    propC: {
      type: String,
      required: true
    },
    propD: {
      type: Number,
      default: 100
    },
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    propF: {
      validator: function (value) {
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },
  template: `
  <div>
    <p>{{ propA }}</p>
    <p>{{ propB }}</p>
    <p>{{ propC }}</p>
    <p>{{ propD }}</p>
    <p>{{ propE }}</p>
    <p>{{ propF }}</p>
  </div>`
})

export default {
  name: 'learn',
  components: {
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style>
</style>

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

例如我们给propF传入的值不是'success', 'warning', 'danger'中的一种，如下：

<my-component :propA="100" :propB="'sdf'" :propC="'propC11'" :propD="100" :propE="{a:'a'}" :propF="'111'" ></my-component>

控制台将会报如下的错误： 

PS：

type 可以是下面原生构造器：

• String
• Number
• Boolean
• Function
• Object
• Array

type 也可以是一个自定义构造器，使用 instanceof 检测。