vuejs组件参数校验

最新推荐文章于 2024-11-10 08:00:00 发布

转载最新推荐文章于 2024-11-10 08:00:00 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzndkj/p/9655015.html

文章标签：

#javascript #ViewUI

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

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

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