props的对象配置

如果将props定义为数组，有如下几个缺点：

1.无法进行数据类型的限制

2.无法对数据进行自定义的校验

解决：将props定义为对象

对象类型：通过对象的方式定义props成员，可以为每个prop成员制定规则(类型，校验...),常用的如下 ：

一，单一类型限制：

通过type属性限制类型

类型要指定为构造函数类型，不要加引号，常见类型有：

String | Number | Boolean | Array | Object | Function

 props: {
    id: {
      type: String,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    originList: {
      type: Array,
      required: true
    }
  }
.....

二，必填项校验：

通过required属性进行限制，如果后期没有传递这个数据，则报错：missing required prop 

（代码可看上面）

三，属性默认值：

通过default属性设置默认值

为props成员设置默认值，如果没有传递数据，则使用默认值，如果传递了数据，则使用传递的数据

细节：这个属性与required冲突，如果设置了required属性，则必须传递，有默认也失效

props: {
    fountColor: {
      type: String,
      default: "#fff",
    },
  }

四，自定义验证函数：

可以对传入的值进行自定义的校验

通过添加一个validator函数进行数据的校验，如果函数返回false,则校验失败，进而报错

props: {
    list: {
      type: Array,
      required: true,
      // 自定义校验（数据源最少2个 最多5个）
      // validator:(v)是父组件的数据
      validator(v) {
        console.log(v);
        if (v.length >= 2 && v.length <= 5) {
          return true;
        } else {
          console.log("数据源2-5");
          return false;
        }
      },
    },
  }