Vue2-props--validator

validator

在 Vue.js 中，可以通过 props 属性中的 validator 选项来定义自定义验证函数，用于验证传入的 prop 值是否符合特定的要求。这个函数将会接收 prop 的值作为参数，并根据自定义的逻辑返回 true 或 false 来进行验证。

• 参数：接收一个参数，即传入的 prop 值。
• 返回值：返回值需为一个布尔值 (true 或 false)，用于指示传入的 prop 值是否通过验证。

new Vue({
  el: "#app",
  template: `
    <my-component
      :string-data='stringData'
      :object-data='objectData' 
      :array-data='arrayData'
      :custom-object='customObjectData'>
    </my-component>
  `,
  components: {
    "my-component": {
      props: {
        // case 1. 验证 原生构造函数下的数据
        stringData: {
          // type: String, // 等价于下述验证
          validator: function (value) {
            return value && typeof value === 'string';
          },
        },
        // case 2. 验证 object 数据
        objectData: {
          // type: Object, // 等价于下述验证
          validator: function (value) {
            return value && typeof value === "object";
          },
        },
        // case 3. 验证 array 数据
        arrayData: {
          // type: Array, // 等价于下述验证
          validator: function (value) {
            return value && Array.isArray(value);
          },
        },
        // case 4. 验证 自定义构造函数下的数据
        customObject: {
          // type: CustomConstructor, // 等价于下述验证
          validator: function (value) {
            // CustomConstructor 是自定义构造函数
            return value && value instanceof CustomConstructor;
          },
        },

      },
      template: `
        <div>
          {{ objectData }}, 
          {{ arrayData }}, 
          {{ customObject }}, 
          {{ stringData }}
        </div>
      `,
      // 显示结果：{ "name": "lee" }, [ 1, 2, 3 ], { "value": "hello" }, s1
    },
  },
  data: {
    objectData: { name: "lee" },
    arrayData: [1, 2, 3],
    customObjectData: new CustomConstructor("hello"),
    stringData: "s1",
  },
});

// 自定义构造函数
function CustomConstructor(value) {
  this.value = value;
}

注意：在 Vue.js 中，组件的 prop 在组件实例创建之前会进行验证，这意味着在 props 属性的 default 或 validator 选项中无法访问组件实例的其他属性，如 data、computed 等。