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>

props特性

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

非props特性

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

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

巴特西

vuejs组件参数校验

最新文章

热门文章