ssc*_*ep3 34
带有管道 (
Number | String)的语法，就像在接受的答案中提出的那样，实际上不起作用。这是带有示例的更详细的解决方案：
类型检查，不需要道具
使用以下语法键入检查道具：
props: {
username: {
type: [ String, Number ]
}
}
这是带有类型检查的属性的实时示例：
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' });类型检查、必需的道具和自定义验证器
使用以下语法与自定义验证器一起键入检查必需的属性。
props: {
username: {
type: [ String, Number ],
required: true, // optional
validator: item => item !== '123' // optional
}
}
这是必需属性和自定义验证器的实时示例：
<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
}
}
Har*_*ath 29
这是我找到的解决方案。
props: {
value: Number | String | Array
}
要么
props: {
value: [Number, String, Array]
}
- 第一个提出的使用管道字符的解决方案 - 这不可能工作，因为管道字符是异或运算，并且“数字异或字符串”的结果是 0。所以基本上，您设置“值：0”。我的猜测是，如果值为零，vuejs 就会忽略类型，因此看起来它可以工作，但实际上无论实际传递的值如何，它总是可以工作。 (5认同)
- 如果您不关心类型，则不必指定它。当然，如果你期望这三种，最好明确说明它们。 (4认同)
- 第一种形式对我不起作用，但第二种形式对我有用 (3认同)
- 使用第一种解决方案，eslint给我一个错误：““ value”属性应该是构造函数（vue / require-prop-type-constructor）。第二种解决方案不产生任何错误或警告 (2认同)
一般来说，道具列为字符串数组，如果您没有任何类型的头痛：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
如果您希望每个道具都是特定类型的值。在这些情况下，您可以将 props 作为一个对象列出，其中属性的名称和值分别包含 prop 名称和类型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
如果要使用多种类型，则如下所示：
props: {
value: [String, Number],
}