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>