vuejs组件参数校验

Posted 2021-01-06 Zina

父组件向子组件传递一些参数，那么子组件有权对这些参数进行一个校验，这个就是组件参数校验

 

需求：父组件传递过来的必须是个字符串，这个要怎么去校验呢

<div id=‘root‘>
　　<child content=‘hello world‘></child>
</div>

<script>
Vue.component(‘child‘,{
　　props:{
　　　　content:String
　　},
　　template:‘<div>{{content}}</div>‘
})
var vm = new Vue({
　　el:‘#root‘
})
</script>

将接收的props定义称对象，并指定类型，不以数组的形式接收参数

接收的数据是字符串类型 或者 数组类型，，都可以

props:{
　　content:[String, Number]
}

 

 

复杂的校验

<div id=‘root‘>
　　<child content=‘hello world‘></child>
</div>

<script>
Vue.component(‘child‘,{
　　props:{
　　　　content:{
　　　　　　type:String,//数据类型
　　　　　　required:false,//是否是必传
　　　　　　default:‘default content‘,//如果没传值，默认值
　　　　　　validator:function(val){//自定义校验器,数据必须>5
　　　　　　　　return (val.length>5)
　　　　　　}
　　　　}
　　},
　　template:‘<div>{{content}}</div>‘
})
var vm = new Vue({
　　el:‘#root‘
})
</script>

 

props特性

父组件向子组件传递参数，子组件恰好声明了这个参数，进行接收

 

非props特性

父组件向子组件传递参数，子组件没有props这块内容，所以就会报错，不去接收，就没法使用这个content

第二个特点是，子组件没接收，对应的属性值会显示在标签中，props特性不会显示