props数据验证

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43307658/article/details/89738974

欢迎访问我的博客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检测 
    }
})
展开阅读全文

没有更多推荐了,返回首页