首页 > Web开发 > 详细

vuejs组件参数校验

时间:2018-09-16 10:17:10      阅读:214      评论:0      收藏:0      [点我收藏+]
父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!