VUE学习：vue基础13————组件：自定义属性验证值

最新推荐文章于 2024-12-31 16:46:54 发布

原创最新推荐文章于 2024-12-31 16:46:54 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在Vue框架中如何对组件的自定义属性进行验证和设定默认值，包括设置属性只接受数字、自定义验证函数、允许的类型为多个、设置必填的String类型属性以及属性的默认值。示例代码详细展示了如何实现这些功能。

提示：
本文为VUE栏目：VUE学习：vue基础13————组件：自定义属性验证值

VUE学习：vue基础13————组件：自定义属性验证值

前言
组件
- 自定义属性验证值

前言

本文vue框架中组件相关。

提示：以下是本篇文章正文内容，下面案例可供参考

组件

自定义属性验证值

v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性，无论写什么内容都一定是string类型。

以下列举集中自定义属性验证值

设置属性propA的值只能是数字类型

可以限制的类型有：Number、String、Boolean、Array、Object、Date（yyyy-MM-dd）、Function、Symbol

<body>
<div id="app">
    <test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
    <h3>{{propA}}</h3>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num:123
        },
        methods: {},
        components:{
            test:{
                template:"#t1",
                props:{
                    propA:Number
                }
            }
        }
    });
</script>

自定义函数来限制内容

<body>
<div id="app">
    <test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
    <h3>{{propA}}</h3>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num:123
        },
        methods: {},
        components:{
            test:{
                template:"#t1",
                props:{
                   
                    propB:{
                        validator:function (val) {
                            return !isNaN(val);
                        }
                    },
                }
            }
        }
    });
</script>

设置属性允许的类型为多个

<body>
<div id="app">
    <test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
    <h3>{{propA}}</h3>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num:123
        },
        methods: {},
        components:{
            test:{
                template:"#t1",
                props:{
                    propC:[String,Number],
                }
            }
        }
    });
</script>

设置属性接收String类型的值并且该属性必填

<body>
<div id="app">
<!--    v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性，无论写什么内容都一定是string类型-->
    <test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
    <h3>{{propA}}</h3>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num:123
        },
        methods: {},
        components:{
            test:{
                template:"#t1",
                props:{
                    
                    propD:{
                        type:String,
                        required:true
                    },
                }
            }
        }
    });
</script>

设置属性的默认值

<body>
<div id="app">
<!--    v-bind来管理的属性后面跟着的双引号中写数字才能正确的表示数字类型，没有被Vue管理的属性，无论写什么内容都一定是string类型-->
    <test :prop-a="num" :prop-b="456"></test>
</div>
<template id="t1">
    <h3>{{propA}}</h3>
</template>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num:123
        },
        methods: {},
        components:{
            test:{
                template:"#t1",
                props:{
                    propE:{
                        type:Boolean,
                        default:false
                    }
                }
            }
        }
    });
</script>