码迷,mamicode.com
首页 > Web开发 > 详细

vuejs组件参数校验

时间:2018-09-16 12:32:19      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:div   必须   校验   required   back   自定义   strong   func   def   

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

 

需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢
<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组件参数校验

标签:div   必须   校验   required   back   自定义   strong   func   def   

原文地址:https://www.cnblogs.com/wzndkj/p/9655015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!