Vue 组件参数校验与非props特性的方法
更新时间：2019年02月12日 09:56:05 作者：UCCs
这篇文章主要介绍了Vue 组件参数校验与非props特性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
子组件接收父组件的参数的时候，props注册接收的参数
props:['count']
子组件可以对接收的参数校验。
例如规定接收的count参数要求是String
props:{
count:String
}
如果count是别的类型就会报错
组件的参数校验
组件的参数校验指的是什么呢？你父组件向子组件传递的内容，子组件有权对这个内容进行一些约束，这个约束我们可以把它叫做参数的校验。
<div id="root">
<child content="hello world"></child>
</div>
Vue.component('child',{
props: ['content'],
template: '<div>{{content}}</div>'
})
let vm = new Vue({
el: '#root',
})
现在有这样一个需求，父组件调用子组件的时候，传递的这个content，我要做一些约束，要求它我传递过来的content必须是一个字符串，我们该怎么实现呢？
<div id="root">
<child content="hello world"></child>
</div>
Vue.component('child',{
props: {
content: String //子组件接收到的 content 这个属性，必须是一个字符串类型的
},
template: '<div>{{content}}</div>'
})
let vm = new Vue({
el: '#root',
})
组件接收到的content这个属性，必须是一个字符串类型的，如果我需要的参数类型是字符串或者数组，又该怎么写呢？
props: {
content: [ String, Number ]
},
content的类型，可以用数组来表示。
content其实还有更复杂的用法：
props: {
content: {
type: Sring,
required: true, //必传
default: 'default value', //默认显示，非必传会显示
validator(value){ //检测 content 的长度，如果长度大于 5，正常显示，如果长度小于 5 则报错
return (value.length > 5)
}
}
}
非props特性
说到非props特性，它一定和props特性相对应。
props特性：当你的父组件使用子组件的时候，通过属性向子组件传值的时候，恰好子组件里面声明了对父组件传递过来的属性的一个接收，也就是说父子组件有个对应关系，如果你这么写我们就把叫做props特性
props特性的特点是，如下图：
- 我们在子组件里有一个
content的内容传递，这个属性的内容传递是不会在dom标签上进行显示的。 - 当你父组件传递了
content，你子组件接收了这个content，你在模版里就可以直接通过插值表达式或者通过this.content，去取得content里面的内容了。
非props特性：父组件向子组件传递了一个属性，但是子组件并没有props这块的内容，也就是说子组件并没有声明我要接收父组件的传递过来的内容
非props特点：
- 非
props特性在子组件里面，没办法获取到你父组件传递的内容，因为你压根没声明你要获取的内容，也就没法用。 - 如果我们用的是非
props特性，那么这个特性是会显示在dom标签上的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
VUE的history模式下除了index外其他路由404报错解决办法
在本篇文章里小编给大家分享的是关于VUE的history模式下除了index外其他路由404报错解决办法，对此有需要的朋友们可以学习下。2019-08-08
Vue2 Element description组件列合并详解
在使用Vue的时候经常会涉及到表格的列合并,下面这篇文章主要给大家介绍了给大家Vue2 Element description组件列合并的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue3中ref和reactive的使用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要为大家详细介绍了vue验证码插件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3+element plus实现侧边栏过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了关于vue中轻量级模糊查询fuse.js使用方法的相关资料,Fuse.js是一个功能强大、轻量级的模糊搜索库,通过提供简单的 api 调用,达到强大的模糊搜索效果,需要的朋友可以参考下2024-01-01
Vue与后台Api进行交互通常是利用vue-resource来实现的，本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue中倒计时组件的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
在vue3+elementPlus网站开发中,详细完成el-table表格的鼠标拖拽/拖曳/拖动排序,下面这篇文章主要给大家介绍了关于Vue3+El-Plus实现表格行拖拽功能的相关资料,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue增加强缓存和版本号的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论