vue.js组件参数怎么校验？组件参数校验经验分享！

2021-06-21 09:46:43 浏览数 (44)

在编程学习之路上我们会遇到各种项目和不同的问题，当然基础是比较需要下硬功夫的，那么下面我们来说说“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组件参数怎么校验？”这问题的一些分享内容，当然如果你有更好的方法也可以和大家一同分享探讨，更对有关于vue.js这块内容的相关知识我们都可以在W3cschool这个平台中学习。


Vue.js

2 人点赞