1.组件参数校验
一个父组件向子组件传值的代码:
<body> <div id="app"> <child content="hello"></child> </div> </body> <script> Vue.component('child',{ template:'<div>{{content}}</div>', props:['content'] }) var vm=new Vue({ el:"#app", data:{ } }) </script>
如果需要做参数校验,比如content必须传字符串,就将props由数组形式改为对象形式,然后进行参数校验。
Vue.component('child',{ template:'<div>{{content}}</div>', props:{ content:String //此时content必须为字符串 } })
这时候如果传入的content是一个数字,这里content前面需要加冒号,才能传递进去数字,如下:
<child :content="1"></child>
就会报一个警告:
如果需要传递数字,那就把String改为Number。
props:{
content:Number
}
如果希望传递参数是数字或者字符串,可以这样写:
props:{
content:[Number,String ]
}
除了数组方式,还可以是对象校验方式
props:{ content:{ type:String, required:true } }
这句话的意思是,content是String类型,并且是必传的参数,如果父组件不传这个参数,就会报错。
如果是多种类型:
props:{ content:{ type:[String,Number], required:true } }
除了require之外,我们还可以写default,在父组件没有传参的时候,就会使用default的属性值,如果传递了参数就使用传递的参数。
<!-- default不传任何的内容 --> <child></child>
props:{ content:{ type:[String,Number], required:false, default:"default" } }
还可以限制content的长度,函数返回false就是不符合。validator就可以实现自定义校验
props:{ content:{ type:[String,Number], validator:function(value){ return (value.length>5)//属性值长度必须大于5 } } }
2.非props特性
props特性:子组件的props中声明了content,而父组件也传递了content,两个是对应的。有两个特性,一个是dom上不会显示属性,另一个是子组件可以通过this来获取传递的值,或是通过差值表达式直接显示。
非props特性是父组件传递一个属性,而自子组件并没有声明这个属性。子组件是无法获取到这个属性的。而且这个属性会显示在dom上面。