如何为 VueJs Props 添加多种数据类型？

小开

最佳答案

这是我找到的解决办法。

props: {
value: [Number, String, Array]
}

小开

在一般道具列为字符串数组，如果你没有任何头痛的类型:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

如果你希望每个道具都是一个特定类型的价值。在这些情况下，您可以将道具列为一个对象，其中属性的名称和值分别包含道具名称和类型:

props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}

如果要使用多种类型，请按以下步骤操作:

props: {
value: [String, Number],
}

小开

正如其他人建议的那样，在 vuejs 中有两种定义道具的方法:

第一个

//No need to define the type with this one
props: ['myVariable', 'foo', 'something']

第二个

//With this one you can define what type the prop is and other different useful things!
props: {
myVariable: String, //You can define the type like this
anyOfTheFollowing: String/Object/Array, //You can also define multiple possible types
'kebab-case-like': Function, //Since vuejs is still javascript and the property 'props' is actually an object, you can define your props like this for kebab-case. You can also just use camelCase and use the kebab-case version in your template and it will still recognize it
customOne: MyCustomType, //You can in theory use classes you've defined aswell
foo: { //This is another way of defining props. Like an object
type: Number,
default: 1, //This is why this is mostly used, so you can easily define a default value for your prop in case it isn't defined
},
andAnotherOne: {
type: Array,
default: () => [], //With Arrays, Objects and Functions you have to return defaults like this since you need to return a new reference to it for it to be used
},
requiredOne: {
type: Object,
required: true //Another use for this. When it is marked as required and it isn't defined you'll get an error in the console telling you about it
}
}

我爱第二个版本，因为它打开了这么多，我特别喜欢的默认属性最。

小开

带有管道(Number | String)的语法，就像在已接受的答案中提出的那样，实际上并不起作用。下面是一个更详细的解决方案，并附有例子:

类型检查，不需要道具

使用以下语法键入 check a prop:

props: {
username: {
type: [ String, Number ]
}
}

下面是一个具有类型检查的属性的实时示例:

Vue.config.devtools = false;
Vue.config.productionTip = false;


Vue.component('test-component', {
name: 'TestComponent',
props: {
username: {
type: [ String, Number ]
}
},
template: `<div>username: \{\{ username }}</div>`
});


new Vue({ el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>


<div id="app">
<!-- valid: String -->
<test-component :username="'user 38'"></test-component>
  

<!-- valid: Number -->
<test-component :username="59"></test-component>
  

<!-- valid: null is valid, it is not required -->
<test-component :username="null"></test-component>


<!-- valid: missing property is valid, it is not required -->
<test-component></test-component>


<!-- invalid: Array -->
<test-component :username="['test', 456]"></test-component>
</div>

类型检查，所需道具和自定义验证器

使用以下语法键入检查所需属性以及自定义验证程序。

props: {
username: {
type: [ String, Number ],
required: true, // optional
validator: item => item !== '123' // optional
}
}

Here is a live example of a required property together with a custom validator:

Vue.config.devtools = false;
Vue.config.productionTip = false;


Vue.component('test-component', {
name: 'TestComponent',
props: {
username: {
type: [ String, Number ],
required: true,
validator: item => item !== '123'
}
},
template: `<div>username: \{\{ username }}</div>`
});


new Vue({ el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>


<div id="app">
<!-- valid: String -->
<test-component :username="'user 38'"></test-component>
  

<!-- valid: Number -->
<test-component :username="59"></test-component>
  

<!-- invalid: Array -->
<test-component :username="['test', 456]"></test-component>
  

<!-- invalid: String, but disallowed by custom validator -->
<test-component :username="'123'"></test-component>
  

<!-- invalid: null property, it is required though -->
<test-component :username="null"></test-component>


<!-- invalid: missing required prop -->
<test-component></test-component>
</div>