首页
所有分类
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阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
简单实现js页面切换功能
Jan 10 Javascript
js 颜色选择插件
Jan 23 Javascript
jQuery树控件zTree使用方法详解（一）
Feb 28 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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
DE1102(1) DE1107(3) R9700(1) 对讲机(1) WR-800F(1) R71E(1) React(6) 胆机(1) ICOM(2) R72E(1)
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果（1）
2017/02/20 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python PyTorch预训练示例
2018/02/11 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python求凸包及多边形面积教程
2020/04/12 Python
tensorflow常用函数API介绍
2020/04/19 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
马来西亚奢侈品牌购物商城：Valiram 247
2020/09/29 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
党员公开承诺事项
2014/03/25 职场文书
运动会的口号
2014/06/09 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis