使用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;
}
}