VueJS 自定义道具验证功能

Posted 2023-02-22

【中文标题】VueJS 自定义道具验证功能

【英文标题】：VueJS Custom Props Validation Function

【发布时间】：2017-05-25 12:57:07

【问题描述】：

我是 VueJS 的新手，所以我一直在关注他们的 official guide。

我能够触发前 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>)

提前致谢

编辑：现在我想一想，是假设返回“真”作为输出，还是只是给出不正确的警告？ 我可能一直以不同的方式看待这个问题，并期望返回值是真/假。

【参考方案1】：

您可能想结帐vue-properties：

import biggerThan from 'vue-properties';

export default 
    props: 
        canDrink: 
            type: Integer, 
            validator: biggerThan(18)
        ,
    

【参考方案2】：

根据文档：

组件可以为其接收的道具指定要求。如果不满足要求，Vue 将发出警告。这在您创作打算供其他人使用的组件时特别有用。

他们在这里说的是，您指定的验证器应该始终得到满足，才能使该属性正常工作。如果没有，它们会发出警告，就像您遇到的那样。

当你像这样定义验证器时，你是说这个特定验证器的所有输入都应该大于 10。

        validator: function (value) 
            console.log("inside validator: " + value);
            return value > 10;
        

然后，当您将数字 5 作为值绑定到此特定属性时，验证器会返回 false 并发出警告。