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特性不会显示
posted @ 2018-09-16 08:51  wzndkj  阅读(3665)  评论(0编辑  收藏  举报