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检测 
    }
})