vuejs组件参数校验

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

<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>