Vue js - 将道具定义为特定类型答案

【问题标题】：Vue js - Define prop as a specific typeVue js - 将道具定义为特定类型
【发布时间】：2018-01-13 05:06:18
【问题描述】：

我正在构建一个 vuejs 组件，它接受名为 idFieldType

的道具

现在我希望这个道具只接受 Number Type 或 String Type

所以我写了如下

idFieldType: {
    Type: Function,
    default: function() {
        return Number;
    },
    validator: function() {
         if(value == String || value == Number) {
               return true;
         }

         return false;    
    }
}

我也尝试将类型替换为 Object。

我的问题是如何编写只接受特定类型的道具？

【问题讨论】：

你可以。试试 typeOf
也许我没有正确理解你的问题，但如果你想要一个道具是数字或字符串，为什么不使用my-prop: [String, Number]？
因为我不希望值是字符串或数字，我希望值是类型字符串或数字:)
似乎 Narek-T 回答了您的问题，但您没有选择它作为最佳答案。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

好的，找到解决办法了..

idFieldType: {
                type: Function,
                default: Number,
                validator: function (value) {
                    if (value() == String || value() == Number) {
                        return true;
                    }

                    return false;
                }
            }

问题是，当指定类型为 Function 时，默认需要一个函数，我返回的是一个返回函数的函数 :)

【讨论】：

如果您在验证器中调用该函数，您应该确保该函数是幂等的，因为您最终可能会在使用它之前调用它 2 次。
Vue.js 文档在vuejs.org/v2/guide/components-props.html#Prop-Validation 进行道具验证显示default 属性包含一个值，而不是一个类型。那你怎么能用default: Number呢？

【解决方案2】：

Vue.JS 内置了 props 验证，你可以设置类型，是否需要，默认值... 例如：

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

注意，Vue.js 还接受多种可能的类型propB: [String, Number],，这正是您所需要的。您可以在official wiki 中阅读更多相关信息

【讨论】：