vue 使用props验证

使用props

在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子:



为什么要有props验证


但是上面这种方式是建立在大家都很遵守约定的情况下的,想象一下当有一个人要使用foo-component组件的时候,他可能对于其要接受的参数有什么要求并不是很清楚,因此传入的参数可能会在开发子组件的人的意料之外,程序就会发生错误,就像我们在函数调用之前先检查一下函数一样,props也可以进行一个预先检查。

平时调用函数的时候在函数开头的地方都是一坨糊糊的参数检查,这种写法很不好了,所有后来就有了校验器模式(别去百度了,我随口取的名字),校验器模式就是指把在函数开头的对参数校验的部分提取出来作为一个公共的部分来管理,让一个什么东西来专门负责校验,当类型不正确的时候就抛个异常根本不去调用这个函数,很多框架设计时都是这么设计的(Spring MVC、Struts2等等),props也提供了这个功能,想一下如果没有这个功能的话,为了保证正确性我们可能需要在每次使用props属性之前都写一坨代码来检查。校验器最大的好处就是大多数情况下我们只需要声明我需要什么样的数据,让校验器检查好了再塞给我。


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

props: { fooMessage: Number },   props: { fooMessage:{type:[String,Nnmber]} },  

type可以是以下原生类型:String Number Boolean Function Object Array Symbol


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

props: {  fooMessage: {  type: Number,  required: true  }  },

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

当父组件未传入参数时子组件的值是128,当父组件传入参数时是其指定的参数,比如这里可以是256。


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

 props: { 

fooMessage: { 

validator: function(value){ 

return value>=0 && value<=128;

  } 

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,118评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,486评论 0 29
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 10,768评论 0 11
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,949评论 0 32
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,712评论 1 33

友情链接更多精彩内容