首页
所有分类
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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
vue中nextTick用法实例
Sep 11 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
js获取url页面id，也就是最后的数字文件名
Sep 25 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
扫雷(1) Date(1) Scheduled(1) 区块链(2) NumPy(2) TypeScript(2) 单向链表(1) 双向链表(6) 模拟登录(1) router(1)
You might like
php debug 安装技巧
2011/04/30 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
简单谈谈favicon
2015/06/10 PHP
php字符串的替换，分割和连接方法
2016/05/23 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
django DRF图片路径问题的解决方法
2018/09/10 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
瑞典网上购买现代和复古家具：Reforma
2019/10/21 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
个人求职信范文
2014/05/24 职场文书
校庆口号
2014/06/20 职场文书
销售员工作检讨书（推荐篇）
2014/10/18 职场文书
工作经验交流材料
2014/12/30 职场文书
毕业感言怎么写
2015/07/31 职场文书
大学生创业，为什么都会选择快餐饮？
2019/08/08 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript