首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue组件开发props验证的实现

Posted in Javascript onFebruary 12, 2019

使用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会发出提示：

vue组件开发props验证的实现

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>

当未传入参数时：

vue组件开发props验证的实现

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验证的实现

尽管控制台上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>

渲染结果：

vue组件开发props验证的实现

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验证的实现

- Author -

安慕希

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js获取当前页面的url网址信息
Jun 12 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
js异步接口并发数量控制的方法示例
Nov 22 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 #Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 #Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 #Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 #Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 #Javascript
在微信小程序中保存网络图片
Feb 12 #Javascript
VUE中使用MUI方法
Feb 12 #Javascript
timestamp(1) 重复数据(2) 临时表(1) 游标(1) 表变量(1) ECharts(3) ip连接(1) 排序失效(1) GTID(1) mixin(1)
You might like
PHP安全配置
2006/12/06 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python实时监控logstash日志代码
2020/04/27 Python
手把手教你从PyCharm安装到激活（最新激活码），亲测有效可激活至2089年
2020/11/25 Python
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
2017/01/12 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
骆驼官方商城：CAMEL
2016/11/22 全球购物
英国最大的在线奢侈手表零售商：Jura Watches
2018/01/29 全球购物
韩国现代百货官网：Hmall
2018/03/21 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店：瑞典家用电器品牌
2021/01/23 全球购物
顶撞领导检讨书
2014/01/29 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
为什么中国式养孩子很累？
2019/08/07 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
python单元测试之pytest的使用
2021/06/07 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js