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;
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
js查找节点的方法小结
Jan 13 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
浅谈React高阶组件
Mar 28 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
微信小程序canvas实现签名功能
Jan 19 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
You might like
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
JavaScript面象对象设计
2008/04/28 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
webpack4简单入门实例
2018/09/06 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
基于python实现百度翻译功能
2019/05/09 Python
学习python分支结构
2019/05/17 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
2015年护士医德医风自我评价
2015/03/03 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
python非标准时间的转换
2021/07/25 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android