props数据验证

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

1 前言

  1. 组件props选项的值可以为为数组类型,也可以是对象类型
  2. props选项的对象类型可以用于对外部传递进来的参数进行数据验证
  3. 比如某个数据必须是数字类型,如果传入字符串,就需要在控制台弹出警告

2 示例

Vue.component('my-component', {
    props: {
        // 必须是数字类型
        prop1: Number,
        // 必须是字符串或者数字类型
        prop2: [String, Number],
        // 布尔,默认true
        prop3: {
            type: Boolean,
            default: true
        },
        // 数字且必传
        prop4: {
            type: Number,
            required: true
        },
        // 如果是数组或者对象,默认必须是一个函数返回
        prop5: {
            type: Object,
            default: function () {
                return {}
            }
        },
        // 自定义一个校验函数
        prop6: {
            validator: function (value) {
                return value > 10
            }
        }
       // 注:type类型可以为Number、String、Boolean、Object、Array、Function,type也可以是一个构造器,使用instansof检测 
    }
})

推荐阅读更多精彩内容