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

时间 2019-11-30

标签 vue.js vue 实战 props 数据验证自定义构造检测栏目 JavaScript 繁體版

原文原文链接

    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类型能够是：html

　　String数组

　　Numberapp

　　Boolean函数

　　Object测试

　　Arrayui

　　Functionthis

type也能够是一个自定义构造器，使用instanceof检测。spa

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

自定义构造器测试：component

<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