属性验证

属性验证

为了避免从父组件接收的数据出现类型不统一，导致最后的数据出错，如：'100' + 10最后输出10010的情况，一般会在数据传送过来时进行验证，以下为四种验证方式：

<div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <h3> 这里是父组件 </h3>
            <Son v-bind:money = "money" v-bind:n = "n"></Son>
        </div>
    </template>
    <template id="son">
        <div>
            <h3> 这里是子组件 </h3>
            <p>父亲给了我 {{money}} 元钱</p>
        </div>
    </template>

<script>
    Vue.component('Father',{
        template:'#father',
        data(){
            return {
                money:1000,
                n:20
            }
        }
    })

    Vue.component('Son',{
        template:'#son',
        props:['money']       //1、没有进行验证，只是单纯的接收了一个父组件传递来的数据
        props:{
            'money':Number,   //2、进行普通属性验证
            'n':{
                validator( val ){   // 4、属性验证函数，一般常用于条件的比较
                    return val>10   //这里返回的是布尔值
                }
            },
            'num':{             
                    type:Number,
                    default:200  //3、default是为属性设置初始值
                }
        }
    })
    new Vue({
        el:"#app"
    })
</script>

总结：

• props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
• props: { attr: attrType } 进行普通属性验证
• props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
• props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

除了以上四种方式，还可能在工作中遇到第三方类库，别人封装的，如：vue-validate vee-validate