为什么要有props验证

在Vue中父组件向子组件中传送数据是通过props实现的，想象一下当有一个人要使用foo-component组件的时候，他可能对于其要接受的参数有什么要求并不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，props也可以进行一个预先检查。

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    < >Vue Study</ >
</head>
<body>

    <div id=\"app\">
        <foo-component :foo-message=\"fooMessage\"></foo-component>
    </div>

<  type=\"text/ \" src=\"lib/vue.js\"></ >
<  type=\"text/ \">

    var fooComponent = {
        props: {
            fooMessage: Number
        },
        template: \'<div> {{ fooMessage }} </div>\'
    };

    var vm = new Vue({
        components: {
            \'foo-component\': fooComponent
        },
        el: \'#app\',
        data: {
            fooMessage: 123
        }
    });

</ >
</body>
</html>

可以使用type来声明这个参数可以接受的数据的类型，当检查规则只有一个的时候type可以略写 如:fooMessage: Number

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    < >Vue Study</ >
</head>
<body>

    <div id=\"app\">
        <foo-component :foo-message=\"fooMessage\"></foo-component>
    </div>

<  type=\"text/ \" src=\"lib/vue.js\"></ >
<  type=\"text/ \">

    var fooComponent = {
        props: {
            fooMessage: [Number, String]
        },
        template: \'<div> {{ fooMessage }} </div>\'
    };

    var vm = new Vue({
        components: {
            \'foo-component\': fooComponent
        },
        el: \'#app\',
        data: {
            fooMessage: 123
        }
    });

</ >
</body>
</html>

当参数可以是多种类型的其中一个的时候，使用数组来表示。 如 fooMessage: [Number, String]

type能够指定的类型

type可以是以下原生类型：

String

Number

Boolean

Function

 

Array

Symbol

required

可以使用required选项来声明这个参数是否必须传入。

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    < >Vue Study</ >
</head>
<body>

    <div id=\"app\">
        <foo-component :foo-message=\"fooMessage\"></foo-component>
    </div>

<  type=\"text/ \" src=\"lib/vue.js\"></ >
<  type=\"text/ \">

    var fooComponent = {
        props: {
            fooMessage: {
                type: Number,
                required: true
            }
        },
        template: \'<div> {{ fooMessage }} </div>\'
    };

    var vm = new Vue({
        components: {
            \'foo-component\': fooComponent
        },
        el: \'#app\',
        data: {
            fooMessage: 256
        }
    });

</ >
</body>
</html>

当未传入参数时：会抛出异常

default

使用default选项来指定当父组件未传入参数时props变量的默认值：

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    < >Vue Study</ >
</head>
<body>

    <div id=\"app\">
        <foo-component></foo-component>
    </div>

<  type=\"text/ \" src=\"lib/vue.js\"></ >
<  type=\"text/ \">

    var fooComponent = {
        props: {
            fooMessage: {
                type: Number,
                default: 128
            }
        },
        template: \'<div> {{ fooMessage }} </div>\'
    };

    var vm = new Vue({
        components: {
            \'foo-component\': fooComponent
        },
        el: \'#app\',
        data: {
            fooMessage: 256
        }
    });

</ >
</body>
</html>

当type的类型为Array或者 的时候default必须是一个函数：

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    < >Vue Study</ >
</head>
<body>

    <div id=\"app\">
        <foo-component></foo-component>
    </div>

<  type=\"text/ \" src=\"lib/vue.js\"></ >
<  type=\"text/ \">

    var fooComponent = {
        props: {
            fooMessage: {
                type: Array,
                default: function(){
                    return [\'foo\', \'bar\'];
                }
            }
        },
        template: \'<div> {{ fooMessage }} </div>\'
    };

    var vm = new Vue({
        components: {
            \'foo-component\': fooComponent
        },
        el: \'#app\',
        data: {
            fooMessage: [\'f\', \'o\', \'o\']
        }
    });

</ >
</body>
</html>

validator 自定义

当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验。

<!DOCTYPE html>
<html>
<head>
    <  charset=\"utf-8\">
    < >Vue Study</ >
</head>
<body>

    <div id=\"app\">
        <foo-component :foo-message=\"fooMessage\"></foo-component>
    </div>

<  type=\"text/ \" src=\"lib/vue.js\"></ >
<  type=\"text/ \">

    var fooComponent = {
        props: {
            fooMessage: {
                validator: function(value){
                    return value>=0 && value<=128;
                }
            }
        },
        template: \'<div> {{ fooMessage }} </div>\'
    };

    var vm = new Vue({
        components: {
            \'foo-component\': fooComponent
        },
        el: \'#app\',
        data: {
            fooMessage: 100
        }
    });

</ >
</body>
</html>

综上所述

props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    fooC: {
        type: String,
        required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
        type: Number,
        default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
        type:  ,
        // 当为对象类型设置默认值时必须使用函数返回
        default: function(){
            return { message: \'Hello, world\' }
        }
    },
    // fooF使用一个自定义的验证器
    fooF: {
        validator: function(value){
            return value>=0 && value<=100;
        }
    }
}

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章