vue.js实战——props数据验证（自定义构造器检测） 

    Vue.component('my-component',{
            props:{
                //必须是数字类型
                propA:Number,
                //必须是字符串或数字类型
                propB:[String,Number],
                //布尔值，如果没有定义，默认值就是true
                propC:{
                    type:Boolean,
                    default:true
                },
                //数字，而且是必传
                propD:{
                    type:Number,
                    required:true
                },
                //如果是数组或对象，默认值必须是一个函数来返回
                propE:{
                    type:Array,
                    default:function (){
                        return [];
                    }
                },
                //自定义一个验证函数
                propF:{
                    validator:function (value){
                        return value>10;
                    }
                }
            }
        })

验证的type类型可以是：

　　String

　　Number

　　Boolean

　　Object

　　Array

　　Function

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

当props验证失败时，在开发版本下会在控制台抛出一条警告。

自定义构造器测试：

<body>
    <div id="app">
        {{myObj}}
            <my-component :my-obj="12"></my-component>
            <my-component :my-obj="myObj"></my-component>
    </div>
    <script>
        function MyObj(){
            this.name=1;
            this.age=2;
        }
        var myObj=new MyObj();
        console.log(new MyObj());

        Vue.component('my-component',{
            props:{
                //自定义构造器测试
                myObj:MyObj,
            },
            template:'<div>自定义构造器测试 ——{{myObj}}</div>'
       
        })
        new Vue({
            el:'#app',
            data:{
                myObj:myObj
            }
        })
    </script>
</body>

显示如下：

传入12时报错

http://www.cnblogs.com/exhuasted/p/7250452.html

posted @ 2019-02-22 15:48  聂小恶  阅读(2725)  评论(0)  编辑  收藏  举报