vue props 默认值_学习 vue 的组件 props 数据类型的验证功能【17】-CSDN博客

学习要点：1.props 验证

本节课我们来开始学习 Vue 的组件 props 数据类型的验证功能。

一． props 验证

1. 之前 props 选项通信采用的是数组方式，其实还有第二种方式：对象；

Sting | Number | Boolean | Function | Object | Array | Symbol

2. 通过对象模式进行传递数据，可以对数据类型进行验证，支持的类似有：

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>17.组件的 props 验证title>head><body><div id="app">    <html-a         :child-num="num"        :child-age="age"        :child-str="str"        :child-arr="arr"        :child-arr3="[1,2,3]"        :child-obj="obj"        :child-other="other"        :child-price="price"    >html-a>div><script src="../js/vue.js">script><script>    Vue.config.productionTip=false;    const app=new Vue({        el:'#app',        data:{            num : 100, //'100' 改成非数值，控制台将警告            age:'100', // 数值与字符串，            str:'Mr.ren', //字符串            arr:[1,2,3,4,5], //数组            obj:{ //对象                name:'Mr.ren',                age:100,            },            other:null, //null undefined 或通过任意类型,            price:100, //自定义验证 如100改成90控制台报错        },        components:{            'html-a' : {                props:{                    childNum:Number, //仅仅支持数值                    childAge:[Number,String], //支持数值和字符串                    childStr:{                        type:String, //设置类型和默认值 [Number, String]                        default:'no data'                     },                    childStr2:{                        type:[String,Number],                         default:'no date' //当没有 v-bind 绑定则显示                    },                    childArr:{                        type:Array, //数组和对象的默认值必须用方法                        default(){                            return [];                        }                    },                    childArr2:{                        type:Array,                        default(){                            return [];                        }                    },                    childArr3:{                        type:Array,                        default(){                            return [];                        },                        required:true, //必须 v-bind 绑定，不能不传                    },                    childObj:{                        type:Object,                        default(){                            return {};                        }                    },                    childOther:{                        type:Object,                        default(){                            return {};                        }                    },                    childPrice:{                        validator(value){                             return value > 90; //自定义验证，不成立报错                        }                    }                },                template:`

{{ childNum }}

{{ childAge }}

{{ childStr }} | {{ childStr2 }}

{{ childArr }} | {{childArr2}} | {{childArr3}}

{{ childObj }}

{{ childOther }}

{{ childPrice }}

`, } } });script>body>html>

PS：`null` 和 `undefined` 会通过任何类型验证

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！