父子组件通信的属性验证 validator

最新推荐文章于 2023-03-27 15:58:22 发布

都挺好，刚刚好

最新推荐文章于 2023-03-27 15:58:22 发布

阅读量379

点赞数

分类专栏： vue2 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/seimeii/article/details/126177580

版权

vue2 专栏收录该内容

54 篇文章 4 订阅

订阅专栏

父子组件通信属性验证

案列：价格的增加，拿到数据必须要做验证防止数据是string型

使用props: 验证

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

注意：

prop 会在一个组件实例创建之前进行验证
所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。


<body>
    <div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <div>
            <p>这个是父组件</p>
            <Son :m = "m" :n = "n"></Son>
        </div>
    </template>
    <template id="son">
        <div>
            <p>这个是子组件</p>
                 <p> {{ m }}</p>
            <p> {{ n+200 }} </p>
        </div>
    </template>
</body>

    
    <script>
        Vue.component('Father',{
             template : "#father",
             data(){
                 return {
                     m: 300,
                    n: 200
                   }
                }
        })
        Vue.component("Son",{
           template : "#son",
           props: {
                'm': Number,
                'n': {
                    validator(val){
                          return val >150
                      }
                    }
               }
        })
        new Vue({
        
        }).$mount('#app')
    </script>

代码中使用

   maxtext: {
      type: Number,
      default: 3,
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return value > 0;
      },
    },

 derection: {
      type: String,
      default: "right",
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["left", "right", "top", "bottom"].indexOf(value) !== -1;
      },
    },

    updateVehicleTime: {
      type: Number,
      default: 0,
      validator(val) {
        return val === 0 || val >= 15;
      }
    },

    updateVehicleTime: {
      type: Number,
      default: 0,
      validator(val) {
        return val === 0 || val >= 15;
      }
    },

    direction: {
      type: String,
      default: 'row',
      validator(val) {
        return Object.values(FlexDriecton).includes(val);
      }
    },

  updateVehicleTime: {
      type: Number,
      default: 0,
      validator(val) {
        return val === 0 || val >= 15;
      }
    },

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },