prop 验证数据

我们可以为组件的 prop 指定验证要求，例如你可以要求一个 prop 的类型为什么。如果说需求没有被满足的话，那么Vue会在浏览器控制台中进行警告，这在开发一个会被别人用到的组件时非常的有帮助。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    title: String, //第一个数据
    likes: Number, // 第一个数据 后面都是
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise
  }
})

上述代码中，对prop进行了基础的类型检查，类型值可以为下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。
需要注意的是null 和 undefined 会通过任何类型验证。
除基础类型检查外，我们还可以配置高级选项，对prop进行其他验证，如：类型检测、自定义验证和设置默认值。
如：

Vue.component('my-component', {
  props: {
    title: {
      type: String, // 检查 prop 是否为给定的类型
      default: '杉杉最美',   // 为该 prop 指定一个默认值，对象或数组的默认值必须从一个工厂函数返回，如：default () { return {a: 1, b: 10} },
      required: true, // 定义该 prop 是否是必填项
      validator (prop) {  // 自定义验证函数，该prop的值回作为唯一的参数代入，若函数返回一个falsy的值，那么就代表验证失败
        return prop.length < 140;
      }
    }
  }
})

示例

正确示例

    <section id="app">
        <prop-verification :list='list'></prop-verification>
    </section>
    <script>
        Vue.component('prop-verification',{
            props:['list'],
            template:`
            <ul class="list">
                <li class="item" v-for='item in list' :key='item.name'> {{ item.name }} </li>
            </ul>
            `
        })
        const vm = new Vue({
            el: '#app',
            data:{
                list:[
                    {name:'张三'},
                    {name:'李四'}
                ]
            },
        })
    </script>

运行结果

数据类型错误

当vm.data.list 不是一个数组时

    <section id="app">
        <prop-verification :list='list'>
        </prop-verification>
    </section>
    <script>
        Vue.component('prop-verification',{
            props:['list'],
            template:`
            <ul class="list">
                <li class="item" v-for='item in list' :key='item.name'> {{ item.name }} </li>
            </ul>
            `
        })
        const vm = new Vue({
            el: '#app',
            data:{
                // 此处数据类型错误，但是控制台不会报错
                // 渲染结果是：由于使用的li元素，只会显示两个小圆点，数据无法显示
                list:2,
            },
        })
    </script>

效果图

图中没有报错信息，页面只有li元素的小圆点

对传入数据进行类型判断

    <section id="app">
        <prop-verification :list='list'>
        </prop-verification>
    </section>
    <script>
        Vue.component('prop-verification',{
            props:{
                // list:Array, // 只为一个数据类型 
                list:[Array,Object], // 为多个数据类型
            },
            template:`
            <ul class="list">
                <li class="item" v-for='item in list' :key='item.name'> {{ item.name }} </li>
            </ul>
            `
        })
        const vm = new Vue({
            el: '#app',
            data:{
                // 此处数据类型错误，但是控制台不会报错
                // 渲染结果是：由于使用的li元素，只会显示两个小圆点，数据无法显示
                list:2,
            },
        })
    </script>

效果图

验证成功，控制报错错误，并且指出数据应该为神马类型，及当前传入的错误数据

详细判断

    <section id="app">
        <prop-verification :list='list'>
        </prop-verification>
    </section>
    <script>
        Vue.component('prop-verification',{
            props:{
                list:{
                    type:[Array,Object], //检测数据类型
                    default:[{name:'我是默认值1'},{name:'我是默认值2'}], //默认值
                    required:true, // 是否必填
                    // 检测是否符合规则
                    validator (prop){
                        // 数据的长度最短为三
                        return prop.length > 2;
                    }
                }
            },
            template:`
            <ul class="list">
                <li class="item" v-for='item in list' :key='item.name'> {{ item.name }} </li>
            </ul>
            `
        })
        const vm = new Vue({
            el: '#app',
            data:{
                list:[
                    {name:'张三'},
                    {name:'李四'}
                ]
            },
        })

效果

虽然数据长度不符合规则，但不影响运行