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

父子组件通信属性验证

案列：价格的增加，拿到数据必须要做验证防止数据是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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    
    <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>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

代码中使用

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

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

    updateVehicleTime: {
      type: Number,
      default: 0,
      validator(val) {
        return val === 0 || val >= 15;
      }
    },
1
2
3
4
5
6
7

    updateVehicleTime: {
      type: Number,
      default: 0,
      validator(val) {
        return val === 0 || val >= 15;
      }
    },
1
2
3
4
5
6
7

    direction: {
      type: String,
      default: 'row',
      validator(val) {
        return Object.values(FlexDriecton).includes(val);
      }
    },
1
2
3
4
5
6
7

  updateVehicleTime: {
      type: Number,
      default: 0,
      validator(val) {
        return val === 0 || val >= 15;
      }
    },
1
2
3
4
5
6
7

  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
      }
    }
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

相关阅读:
杨氏矩阵解法
流媒体协议
apicloud影视解析APP源码 HTML
基于若依ruoyi-nbcio支持flowable流程角色，同时修改流转用户为username，流程启动做大调整（二）
正则表达式提取返回报文data里面的\“id\“:312254,的值
MindSpore数据集加载-GeneratorDataset数据处理报错：The pointer[cnode] is null
Kafka读取数据到Hbase数据库2种方式使用桥梁模式
01.java课复习
Golang 函数不定参数
续集来了！我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

原文地址：https://blog.csdn.net/seimeii/article/details/126177580

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

父子组件通信 属性验证

代码中使用

父子组件通信属性验证