VueJS 使用带有 NULL 和“未定义”值的道具类型验证？答案

【问题标题】：VueJS Using Prop Type Validation With NULL and 'undefined' Values?VueJS 使用带有 NULL 和“未定义”值的道具类型验证？
【发布时间】：2020-03-26 05:55:27
【问题描述】：

即使VueJS 2 official documentation about prop validation 声明（作为代码示例的注释行）：

// 基本类型检查（null 和 undefined 值将通过任何类型验证）

this code reproduction 出现以下错误 - 这是为什么？

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Boolean, got Null

<template>
  <div>
    <h1>{{ title }}:</h1>
    <MyInput :value="null" />
  </div>
</template>

<script>
Vue.component('MyInput', Vue.extend({
  props: {
    value: {
      type: [String, Number, Boolean],
      required: true,
    },
  },
  template: `
    <select v-model="value">
      <option value="null">
        null value
      </option>
      <option value="">
        Empty value
      </option>
    </select>`,
}));

export default {
  data: () => ({
    title: 'VueJS Using Prop Type Validation With NULL and `undefined` Values?'
  }),
};
</script>

【问题讨论】：

标签： javascript validation vue.js types vuejs2

【解决方案1】：

正如 Cato 所说，使用 validator 可以帮助解决这个问题。

您需要提供default 并确保required 未设置或为false。

<script>
Vue.component('MyInput', Vue.extend({
    props: {
        value: {
            type: [String, Number, Boolean],
            default: null,
            validator: (p) => {
                return ['string', 'number', 'boolean'].indexOf(typeof p) !== -1 || p === null;
            },
        }
    }
});
</script>

这可能看起来和这个一样...

<script>
Vue.component('MyInput', Vue.extend({
    props: {
        value: {
            type: [String, Number, Boolean],
            required: false,
            default: null,
        }
    }
});
</script>

但是，在第二个示例中，您可以传递 undefined。在第一个你可以传递列出的类型加上null。

【讨论】：

【解决方案2】：

因为required: true

来自API docs（更多详情）

必需：布尔值定义是否需要道具。在非生产环境中，如果这个值是真的并且prop没有通过，则会抛出控制台警告。

【讨论】：

【解决方案3】：

// 基本类型检查（null 和 undefined 值将通过任何类型验证）

这仅适用于未设置required: true 的情况。在您的代码中，您说该道具是必需的，因此 Vuejs 显示警告

【讨论】：

注意：如果您想要也允许null，请使用验证器：validator: prop => typeof prop === 'string' || prop === null