props属性验证

常用形式：

      props: {
             key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
         }

业务：我现在想要 > 1000 我才要，没有 > 1000 我就不要
解决： vue提供了一个：validator

      props: {
             key: {
            validator( value ){
            return value 的条件
                         }
                  }
         }

不常用形式

          props: {
          propA: [],
          propB: {
                type: String,
               require: true
          },
         propC: {
              type:String,
               default: 'yyb'
        },
       propD: {
            type: String,
           default: function(){
            return 'yyb'
            }
         }
}

有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库

例子

<body>
          <div id="app">
               <Father></Father>
          </div>
         <template id="father">
            <div>
                 <h3> father组件 </h3>
                  <hr>
                 <Son
                        :money = "money"
                        :goodnum = 'goodNum'
                   />
              </div>
        </template>
       <template id="son">
            <div>
               <h3> son组件 </h3>
               <p> 给了我{{ money + 1 }} </p>
            </div>
        </template>
</body>
<script>
     Vue.component('Father',{
           template: '#father',
            data () {
              return {
                   money: 1000,
                   goodNum: 200
                }
            }
      })
Vue.component('Son',{
           template: '#son',
          props: {
         'money': Number,
          'goodnum': {
           validator( value ){
             return value > 100
               }
           }
       }
})
new Vue({
      el: '#app'
})
</script>

props属性验证

猜你喜欢