Vue：Prop验证的使用

学习笔记，欢迎大家一起交流学习n(*≧▽≦*)n

html:

<div id="component5">
    <my-component Multipletypes="multiple-types" require="propc" valid="success"></my-component>
</div>

js: 若不符合要求，控制台将报错

//Prop 验证
    Vue.component('my-component',{
        props: {
            // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
            num: Number,
            // 多个可能的类型 单词中不能有大写字母
            Multipletypes: [String, Number],
            // 必填的字符串
            require: {
                type: String,
                required: true
            },
            // 带有默认值的数字
            defnum: {
                type: Number,
                default: 100
            },
            // 带有默认值的对象
            obj: {
                type: Object,
                // 对象或数组默认值必须从一个工厂函数获取
                default: function () {
                    return { message: 'hello' }
                }
            },
            // 自定义验证函数
            valid: {
                validator: function (value) {
                    // 这个值必须匹配下列字符串中的一个,否则控制台会报错
                    return ['success', 'warning', 'danger'].indexOf(value) !== -1
                }
            }
        },
        template:'<div><ol><li>{{num}}</li><li>{{require}}</li><li>{{Multipletypes}}</li><li>{{defnum}}</li><li>{{obj}}</li><li>{{valid}}</li></ol></div>'
    })
    new Vue({
        el:'#component5'
    })