Vue：Prop验证的使用

Dear 丶 2024-04-19 12:41 50阅读 0赞

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

![20190918141309934.png][]

html:

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'
        })

[20190918141309934.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/189d2714677847bbb4929e1f5e04bde3.png