Vue：props完整校验

1.1 props

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

1. 可以 传递 任意数量 的prop
2. 可以 传递 任意类型 的prop
   

1.2 props校验

1.思考

组件的props可以乱传吗

2.作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

3.语法

• 类型校验
• 非空校验
• 默认值
• 自定义校验

props: {
    校验的属性名：类型 // Stirng | Number | Object | Array | Boolean | Function
    list:Array, // 表示只校验类型，类型是数组即可
   say:Function, // 表示只校验类型，类型是函数即可
}

1.3 props校验完整写法

1.语法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

2.代码实例

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

4.代码讲解

<template>
  <div>
    <!-- 父传子，就是给组件标签，添加属性 -->
    <!-- :str="变量或表达式"，变量要在data中定义；str="值"，说明这个值就是一个字符串 -->
    <!-- 注意div中的变量不加this，script中的变量加this -->
    <Son str="hello" 
    :age="age" 
    :visible="visible"
    :list="list" 
    :user="user" 
    :say="say"></Son>
  </div>
</template>
data() {
  return {
    // 父传子的类型
    age:20,
    visible:true,
    list:['a', 'b', 'c'],
    user:{name:'xx', sex:'男'},
    say() {
      console.log(123)
    },
  }
},

<script>
    export default {
        name:'SonPage',
        created() {
            this.say() // 调用接收到的props中的say方法
        },
        // props写成数组格式
        // props:['str', 'age', 'visible', 'list', 'user', 'say']
        // props写成对象格式，才可以对接收的变量进行校验
            // 1. required:true,表示父组件，必须传递这个值
            // 2. type:Stirng | Number | Object | Array | Boolean | Function
            // 2.1 type:[String, Number],表示接收的数据允许字符串和数字类型
            // 3. default:'', 表示传过来的默认值
            // 3.1 默认值如果是对象或数据，要写成函数格式，函数中返回对象或数组
        props: {
            // 键:{在这里对接收的数据，进行校验}
            str:{
                required:true // 表示父组件，必须传递str这项数据

            },
            age:{
                default:100, // 如果父组件，没有传递age,则让age等于100
                // type:Number // Number不要加引号
                type:[Number, String] // 传递过来的数据，可以是数字或字符串
            },
            visible:{}, 
            list:Array, // 表示只校验类型，类型是数组即可
            user:{
                default: () => {
                    return {} // 对于默认值是数组或对象的情况，默认值要写一个函数，函数中返回默认值
                }
            },
            say:Function, // 表示只校验类型，类型是函数即可 
        }
    }
</script>