vue.js组件参数如何校验

本篇内容主要讲解“vue.js组件参数如何校验”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue.js组件参数如何校验”吧!

1.什么是组件参数校验？

什么是组件参数校验？通俗的来说就是我们在编程中父组件向子组件传递一些参数，那么子组件在通过对数据进行校验，这就被称为组件参数校验。下面是校验的相关代码：

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

2.复杂校验

对于复杂的校验我们看下这串代码：

<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特性就不会显示。

到此，相信大家对“vue.js组件参数如何校验”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！