Vue 属性验证

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

注意：除了以上形式的属性验证以外，将来还可能遇到的是第三方封装的类库 vue-validate vee-validate ...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <Son :money = "money" :n = "n"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是子组件 </h3>
      <p> 父亲给了我  {{ money + 100}}  钱  </p>
      <p> num: {{ num }} </p>
    </div>
  </template>

</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    父子组件通信会使用到 props 
  */

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 1000,
        n: 400
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: {
      // key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
      'money': Number, // String   Boolean       Object...
      'n': {
        validator ( val ) { //属性验证函数，一般常用于条件的比较
          // val 就是我们得到的数据
          return  val > 300 //返回值是一个布尔值
        }
      },
      'num': {
        type: Number,
        default:200
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>
</html>

猜你喜欢