Vue笔记之props验证
使用props
在Vue中父组件向子组件中传送数据是通过props实现的，一个简单的使用props的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: ['fooMessage'],
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 123
}
}); </script>
</body>
</html>
为什么要有props验证
但是上面这种方式是建立在大家都很遵守约定的情况下的，想象一下当有一个人要使用foo-component组件的时候，他可能对于其要接受的参数有什么要求并不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，props也可以进行一个预先检查。
平时调用函数的时候在函数开头的地方都是一坨糊糊的参数检查，这种写法很不好了，所有后来就有了校验器模式（别去百度了，我随口取的名字），校验器模式就是指把在函数开头的对参数校验的部分提取出来作为一个公共的部分来管理，让一个什么东西来专门负责校验，当类型不正确的时候就抛个异常根本不去调用这个函数，很多框架设计时都是这么设计的（Spring MVC、Struts2等等），props也提供了这个功能，想一下如果没有这个功能的话，为了保证正确性我们可能需要在每次使用props属性之前都写一坨代码来检查。校验器最大的好处就是大多数情况下我们只需要声明我需要什么样的数据，让校验器检查好了再塞给我。
type
可以使用type来声明这个参数可以接受的数据的类型，当检查规则只有一个的时候type可以略写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: Number
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 123
}
}); </script>
</body>
</html>
当传入的参数类型不正确的时候Vue会发出提示：
type接受多个类型
当参数可以是多种类型的其中一个的时候，使用数组来表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: [Number, String]
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 123
}
}); </script>
</body>
</html>
type能够指定的类型
type可以是以下原生类型：
String
Number
Boolean
Function
Object
Array
Symbol
required
可以使用required选项来声明这个参数是否必须传入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: {
type: Number,
required: true
}
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 256
}
}); </script>
</body>
</html>
当未传入参数时：
default
使用default选项来指定当父组件未传入参数时props变量的默认值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: {
type: Number,
default: 128
}
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 256
}
}); </script>
</body>
</html>
当父组件未传入参数时子组件的值是128，当父组件传入参数时是其指定的参数，比如这里可以是256。
当type的类型为Array或者Object的时候default必须是一个函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: {
type: Array,
default: function(){
return ['foo', 'bar'];
}
}
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: ['f', 'o', 'o']
}
}); </script>
</body>
</html>
required && default ???
那么required和default是否能同时出现在一个props变量中呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: {
type: Number,
required: true,
default: 128
}
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 256
}
}); </script>
</body>
</html>
渲染结果：
尽管控制台上Vue报了错误，但是props变量fooMessage还是使用了设置的default值。
事情不会这么简单，再测试一下其它的情况，比如当传入的参数验证不通过的时候：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: {
type: Number
}
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 'foobar'
}
}); </script>
</body>
</html>
渲染结果：
fooMessage要求的类型是Number，传入了一个String类型的，尽管在控制台提示报了错，但是仍然将其渲染了出来。
由此可以得出一个结论：Vue的props校验只是提供一个参考，并不是强制性的。
validator
当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<foo-component :foo-message="fooMessage"></foo-component>
</div> <script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript"> var fooComponent = {
props: {
fooMessage: {
validator: function(value){
return value>=0 && value<=128;
}
}
},
template: '<div> {{ fooMessage }} </div>'
}; var vm = new Vue({
components: {
'foo-component': fooComponent
},
el: '#app',
data: {
fooMessage: 100
}
}); </script>
</body>
</html>
一个综合的例子
props: {
// fooA只接受数值类型的参数
fooA: Number,
// fooB可以接受字符串和数值类型的参数
fooB: [String, Number],
// fooC可以接受字符串类型的参数，并且这个参数必须传入
fooC: {
type: String,
required: true
},
// fooD接受数值类型的参数，如果不传入的话默认就是100
fooD: {
type: Number,
default: 100
},
// fooE接受对象类型的参数
fooE: {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function(){
return { message: 'Hello, world' }
}
},
// fooF使用一个自定义的验证器
fooF: {
validator: function(value){
return value>=0 && value<=100;
}
}
}
.
Vue笔记之props验证的更多相关文章
- vue 组件开发 props 验证
使用props 在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子: <!DOCTYPE html> <html> <head> ...
- Vue笔记（props和 mounted）
1.mounted 1.1mounted中使用$nextTick会导致页面挂掉 mounted() { // 页面卡死 this.$nextTick(() => { this.setUrl() ...
- vue.js实战——props数据验证（自定义构造器检测）
Vue.component('my-component',{ props:{ //必须是数字类型 propA:Number, //必须是字符串或数字类型 propB:[String,Number], ...
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue props验证
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- 【转存】Vue组件选项props
原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
- Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...
随机推荐
- 4th 课堂SCRM会议旁观记录
项目名称:基于C#的连连看设计 小组名称:待定 小组成员:张政.张金生.武志远.李权 Master:张政 项目已完成部分: 现阶段已经实现了一定的功能,可以运行使用,进行第一关的游戏. 今天计划要完成 ...
- webpack打包多html开发案例新
闲来无事在原来简单打包案例的基础上,参考vue-cli的打包代码,改为多文件打包. 区别于上篇文章<webpack打包多html开发案例>,此次打包根据开发的不同环节进行打包,也就是有开发 ...
- 7. 由一道ctf学习变量覆盖漏洞
0×00 背景 近期在研究学习变量覆盖漏洞的问题,于是就把之前学习的和近期看到的CTF题目中有关变量覆盖的题目结合下进一步研究. 通常将可以用自定义的参数值替换原有变量值的情况称为变量覆盖漏洞.经常导 ...
- bzoj2429- 聪明的猴子
题意其实就是说有很多个点,求一组边把它们都连接起来,并且最大的那条边最小.很明显这就是一个最小生成树,是一颗保证最长边最短的树. 代码 刚刚学了个Borůvka算法,于是写了两个. Borůvka # ...
- 【bzoj5183】[Baltic2016]Park 离线+对偶图+并查集
题目描述 在Byteland的首都,有一个矩形围栏围起来的公园.在这个公园里树和访客都以一个圆形表示.公园有四个出入口,每个角落一个(1=左下角,2=右下角,3=右上角,4=左上角).访客能通过这些出 ...
- 【Java】关于@RequestBody
首先@RequestBody需要接的参数是一个string化的json,这里直接使用JSON.stringify(json)这个方法来转化 其次@RequestBody,从名称上来看也就是说要读取的数 ...
- js复选框插件
<div class="selectList selectQgClass" id="selectQgClass"> <div class=&q ...
- 【BZOJ4943】【NOI2017】蚯蚓排队（哈希）
[BZOJ4943][NOI2017]蚯蚓排队(哈希) 题面 BZOJ 洛谷 UOJ 题解 记得去年看网络同步赛的时候是一脸懵逼的. 昨天看到\(zsy\)做了,今天就看了看.. 这不是\(Hash\ ...
- BZOJ4197 [Noi2015]寿司晚宴 【状压dp】
题目链接 BZOJ4197 题解 两个人选的数都互质,意味着两个人选择了没有交集的质因子集合 容易想到将两个人所选的质因子集合作为状态\(dp\) \(n\)以内质数很多,但容易发现\(\sqrt{n ...
- POJ.1426 Find The Multiple （BFS）
POJ.1426 Find The Multiple (BFS) 题意分析 给出一个数字n,求出一个由01组成的十进制数,并且是n的倍数. 思路就是从1开始,枚举下一位,因为下一位只能是0或1,故这个 ...