我是 VueJS 的新手,所以我一直在关注他们的官方指南 https://v2.vuejs.org/v2/guide/components.html#Prop-Validation.
我能够触发前 5 个属性验证器,但我似乎无法触发最后一个示例(自定义验证函数)。
我的JS文件:
Vue.component('propValidation', {
props: {
// basic type check (`null` means accept any type)
propA: Number,
// multiple possible types
propB: String,
// 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: {
type: Number,
validator: function (value) {
console.log("inside validator: " + value);
return value > 10;
}
}
},
template:"<div>" +
"<p>PropA (Number): {{propA}}</p>" +
"<p>PropB ([String, Number]): {{propB}}</p>" +
"<p>PropC (Require String): {{propC}}</p>" +
"<p>PropD (Default Number): {{propD}}</p>" +
"<p>PropE (Default Object/Array): {{propE}}</p>" +
"<p>PropF (Custom Validator): {{propF.validator()}}</p>" +
"</div>"
});
new Vue({
el:"#example"
});
和 HTML 文件:
<div id="example">
<prop-validation :prop-a="200" prop-b="string" prop-c="Require String" :prop-e="{not:'wee'}" :prop-f="5"></prop-validation>
</div>
最后的结果是:
PropA (Number): 200
PropB ([String, Number]): string
PropC (Require String): Require String
PropD (Default Number): 100
PropE (Default Object/Array): { "not": "wee" }
PropF (Custom Validator):
并发出警告:
[Vue warn]: Invalid prop: custom validator check failed for prop "propF". (found in component <propValidation>)
提前致谢
编辑:现在我想了一下,它是否应该返回“true”作为输出,或者只是发出警告,表明它不正确?
我可能一直以不同的方式看待这个问题,并期望返回值是 true/false。