组件的参数校验

即对组件进行约束或检查

Vue的基本模板

首先我们书写一个简单的父组件向子组件传递效果（此处包含HTML及JS部分）：

<body>
    <div id="root">
        <child :content="12345"></child>
    </div>

    <script type="text/javascript">
        Vue.component('child',{
            props:['content'],
            template:'<div>{{content}}</div>'
        })

        var vm =new Vue({
            el:'#root',
        })
    </script>
</body>

注意，由于父组件向子组件传递的值为数字，所以需要在 content 前加冒号 “ : ”

校验目的

简单说就是：对传递的参数进行判断。

例如：我们想对上述代码中父组件传递给子组件的 “12345” 这个数字进行检查，看是否为数字而不是字符串，以免有人在上传年龄时上传名字。

简单校验实现

我们在props内放入对象，并放入 content:Number , 意为：content是数字类型就没问题。（注意Number的大小写）

Vue.component('child',{
       props:{
           content:Number
       },
       template:'<div>{{content}}</div>'
})

而当我们传递参数不正确时：

将父组件中content的值修改为字符串，并将父组件content前面的冒号去除：

虽然输出还是 “abcde” ，但是报错：期待传入 “abcde” 应该使用字符串类型。

进一步校验：

我们想允许父组件传递的参数为数字或者字符串时，

 Vue.component('child',{
        props:{
            content:[Number,String]
        },
        template:'<div>{{content}}</div>'
})

校验其他部分

在参数后跟一个对象

 Vue.component('child',{
        props:{
            content:{
                type:String,
                required:true
            }
        },
        template:'<div>{{content}}</div>'
})

上述代码中type指对象的类型，required指必须传入本属性。

当我们仅适用模板并不传入参数 content 时：

报错提示：没有找到需要的参数 “content” 。

我们再说一下这个required属性，既然属性值为true意为必须传入，那我如果设定值为false，就是说这个对象可以不传入。

那我们引入下一个属性：default

 Vue.component('child',{
        props:{
            content:{
                type:String,
                required:false,
                default:"try"
            }
        },
        template:'<div>{{content}}</div>'
})

上面代码意为：组件中的这个content可以不从父组件接收参数，如果接收到了，那么content为接收的参数，否则为 default 的属性值。

没有报错并给 content 赋了默认的 default 的值。

进一步校验

我们想进行更复杂的校验，例如下面我们实现对传入子组件参数长度的校验。

引入一个新的属性：validator，即“自定义校验器”。返回true 或 false。

<body>
    <div id="root">
        <child content="hello world"></child>
    </div>

    <script type="text/javascript">
        Vue.component('child',{
            props:{
                content{
                    type:String,
                    validator:function(value){
                        return (value.length > 5)
                    }
                }
            },
            template:'<div>{{content}}</div>'
        })

        var vm =new Vue({
            el:'#root',
        })
    </script>
</body>

解读一下这个代码：子组件接收一个名为 content 的属性，这个属性类型必须是 String ，同时对 content 使用校验器进行校验，这里使用一个函数，其中，value指 content 传入的参数 “hello world” ，并在返回值中判断 "value.length > 5" ,所以校验通过，返回true。