vue组件开发中道具验证的实现

使用道具

在Vue中，父组件通过道具将数据传输给子组件，这是一个使用道具的简单示例：

！DOCTYPE html html head meta charset=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component : foo-message=' foo message '/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue . js '/script script type=' text/JavaScript ' var foo component={ prop 3360[' foo message ']，template: ' div { {var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo message : 123 } })；/script/body/html为什么要有道具验证

然而，上述方法是基于每个人都遵守协议的事实。想象一下，当一个人想要使用foo-component组件时，他可能不太清楚他想要接受的参数。因此，传入的参数对于开发子组件的人来说可能是意想不到的，程序会出错。就像我们在调用函数之前检查函数一样，道具也可以做一个预检查。

通常，当调用一个函数时，在函数的开始有一大堆参数检查。这篇文章很糟糕。后来有了格子图案(不要去百度，我随便取的名字)。checker模式是指将函数开头的参数检查部分提取为公共部分进行管理，让某个东西负责检查，当类型不正确时抛出异常，根本不调用函数。很多框架都是这样设计的(Spring MVC、Struts2等)。)，而道具也提供了这个功能。如果没有这个功能，我们可能需要在每次使用道具属性之前写一段代码进行检查，以确保其正确性。验证器最大的优点是，在大多数情况下，我们只需要声明我需要什么样的数据，并让验证器检查它，然后把它塞给我。

类型

类型可用于声明此参数可接受的数据类型。当只有一个检查规则时，类型可以缩写：

！DOCTYPE htmlhtmlhead元字符集=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component : foo-message=' foo message '/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue . js '/script script type=' text/JavaScript ' var foo component={ props 3360 { foo message 3360 Number }，template:var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo message : 123 } })；/script/body/htmlvue将在传入的参数类型不正确时给出提示：

类型接受多种类型

当参数可以是多种类型之一时，它由数组表示。

！DOCTYPE htmlhtmlhead元字符集=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component : foo-message=' foo message '/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue . js '/script script type=' text/JavaScript ' var foo component={ prop : { foo message 3360[Number，String] }，template:var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo message : 123 } })；/script/body/htmltype可以指定的类型

类型可以是以下本机类型：

字符串数字布尔函数对象数组符号必需

您可以使用必需的选项来声明是否必须传入此参数。

！DOCTYPE htmlhtmlhead元字符集=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component : foo-message=' foo message '/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue。js '/script脚本类型=' text/JavaScript ' var foo组件={ prop : { foo message 3360 { type 3: Number，var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo message : 256 } })；/脚本/正文/html当未传入参数时：

系统默认值

使用系统默认值选项来指定当父组件未传入参数时小道具变量的默认值：

！DOCTYPE htmlhtmlhead元字符集=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component/foo-component/div脚本类型=' text/JavaScript ' src=' http : lib/vue。js '/script脚本类型=' text/JavaScript ' var foo组件={ prop s : { foo消息： { type 3: Number，default: 128 } }，template var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo消息： 256 } })；/脚本/正文/html当父组件未传入参数时子组件的值是128,当父组件传入参数时是其指定的参数，比如这里可以是256。

当类型的类型为排列或者目标的时候系统默认值必须是一个函数：

！DOCTYPE html html head meta charset=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue。js '/script script type=' text/JavaScript ' var foo component={ prop s : { foo message 3360 { type 3: Array，default : function(){ return[' foo ' } }，template : ' div { { foo message } }/div ' }；var VM=new Vue({ components : { ' foo-component ' : foo component }，el: '#app '，data: { fooMessage: ['f '，' o '，' o ']})；/脚本/正文/html必需的默认值？

那么需要和系统默认值是否能同时出现在一个小道具变量中呢？

！DOCTYPE html html head meta charset=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue。js '/script script type=' text/JavaScript ' var foo component={ prop s : { foo message 3360 { type 3: Number，required: true，default : var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data 3: { foo message : 256 })；/脚本/正文/html渲染结果：

尽管控制台上某视频剪辑软件报了错误，但是小道具变量fooMessage还是使用了设置的系统默认值值。

事情不会这么简单，再测试一下其它的情况，比如当传入的参数验证不通过的时候：

！DOCTYPE html html head meta charset=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component : foo-message=' foo message '/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue。js '/script script type=' text/JavaScript ' var foo component={ prop : { foo message 3360 { type 3: Number } var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo message 3360 ' foo bar ' })；/脚本/正文/html渲染结果：

fooMessage要求的类型是号码，传入了一个线类型的，尽管在控制台提示报了错，但是仍然将其渲染了出来。

由此可以得出一个结论：Vue的小道具校验只是提供一个参考，并不是强制性的。

验证器

当验证规则复杂，无法满足默认提供的验证规则时，可以使用自定义函数进行验证。

！DOCTYPE htmlhtmlhead元字符集=' utf-8 ' title vue Study/title/head body div id=' app ' foo-component : foo-message=' foo message '/foo-component/div script type=' text/JavaScript ' src=' http : lib/vue . js '/script script type=' text/JavaScript ' var foo component={ prop : { foo message 3360 { validator : function} }，template : ' div { { FooMEssage } }/div ' }；var VM=new Vue({ components 3360 { ' foo-component ' : foo component }，el: '#app '，data : { foo message : 100 } })；/script/body/html综合示例

Props: {//fooA只接受数字参数fooA: Number，//fooB可以接受字符串和数字参数FooB :[字符串，数字]，//fooc可以接受字符串参数，并且该参数必须在fooc: {type:string，required:true }中传递。//food接受数值类型的参数，如果没有传入，默认值为100food: {type3360 number，default3360 100}。//fooE接受对象类型的参数fooe: {type:object。//设置对象类型默认值时，必须返回default 3360 function(){ return { message : ' hello，world ' } } } }。//fooF使用自定义验证器foof: {验证器：函数(值){返回值=0值=100；}}}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。