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
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- 【转存】Vue组件选项props
原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 ...
- vue前端开发那些事——vue组件开发
vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...
- Vue组件开发实例（详细注释）
Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- vue 开发系列（三） vue 组件开发
概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件 ...
- Vue笔记之props验证
使用props 在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子: <!DOCTYPE html> <html> <head> ...
- Vue组件传值prop验证方式
在Vue组件开发过程中,父组件要经常给子组件传递数据,在传递数据的过程中,子组件可以使用prop来接收父组件传递的值,同时呢,我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个 ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
随机推荐
- linux shell语言编程规范安全篇之通用原则【转】
shell语言编程规范安全篇是针对bash语言编程中的数据校验.加密与解密.脚本执行.目录&文件操作等方面,描述可能导致安全漏洞或风险的常见编码错误.该规范基于业界最佳实践,并总结了公司内部的 ...
- python 中的__del__
# -*- coding: utf-8 -*- # @Time : 2018/9/19 20:21 # @Author : cxa # @File : delDemo.py # @Software: ...
- 利用github pages五分钟建好个人网站+个人博客
笔者自己在建个人网站/个人博客的时候其实遇到了不少麻烦,但是都一一解决了,这里教给大家最简单的方式. 首先你需要一个GitHub账号,访问https://github.com创建新账号即可. 然后访问 ...
- nodejs 接收上传的图片
1.nodejs接收上传的图片主要是使用formidable模块,服务器是使用的express搭建. 引入formidable var formidable = require('./node_mod ...
- [How to] Phoenix 与 CDH5.4.2 HBase的整合
1.简介 Phoenix将SQL带回到了NOSQL的世界,其在HBase之上做了一个layer,客户端通过SQL调用Phoenix,Phoenix在转化为HBase客户算API进行访问HBase,其很 ...
- 18 A GIF decoder: an exercise in Go interfaces 一个GIF解码器：go语言接口训练
A GIF decoder: an exercise in Go interfaces 一个GIF解码器:go语言接口训练 25 May 2011 Introduction At the Googl ...
- 用sklearn计算卡方检验P值
情形: 1. 对于一批分类变量,我们通常要评价两两之间的相关程度. 2. 因变量是分类变量,衡量其他分类变量和因变量的相关性高低. 来源:https://blog.csdn.net/snowdropt ...
- MySQL权限操作：Grant、Revoke
数据库操作: 创建数据库.创建表——CREATE 删除数据库.删除表——DROP 删除表内容——TRUNCATE.DELETE(后者效率低.一行一行地删除记录) 查询数据库.查询表——SELECT 插 ...
- 打开mvc项目无法运行，报"Unable to launch the IIS Express Web server"
今天遇到一个问题,打开asp.net mvc 项目,右击浏览器运行,无法运行... 提示下面错误, 解决方案: 删除项目文件夹下的 .vs 文件夹,然后重新打开项目运行即可 参考:http://www ...
- Nginx1.8.1打开gzip压缩
1.进入Nginx配置文件目录,打开nginx配置文件 cd /usr/local/src/nginx-1.8.1 vi nginx.conf 2.找到“http {”在之间加入如下配置 gzip o ...