VueJs组件prop验证简单介绍


Posted in Javascript onSeptember 12, 2017

组件

Vue.js引入的组件,让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用,或者使用原生元素但是以is特性做扩展。

今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子。

<div id="app">
  <my-child
   :num="100"
   :msg="'sdf'"
   :object="{a:'a'}"
   :cust="100"
  ></child>
 </div>
 <script type="text/javascript">
  Vue.component('my-child', {
   props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    num: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    msg: {
     type: String,
     required: true
    },
    // 数字,有默认值
    num1: {
     type: Number,
     default: 1000
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    object: {
     type: Object,
     default: function () {
     return { message: 'hello' }
     }
    },
    // 自定义验证函数
    cust: {
     validator: function (value) {
     return value > 10
     }
    }
   },
   template: `<div>
       <p>{{ num }}</p>
       <p>{{ msg }}</p>
       <p>{{ num1 }}</p>
       <p>{{ object }}</p>
       <p>{{ cust }}</p>
      </div>`
  })
  new Vue({
   el: "#app"
  });
 </script>

输出结果

这里都是通过验证了的,能够全部输出来,而且控制台没有报错。
如果有不符合的,控制台会报错。

<div id="app">
  <my-child
   :num="asd"
   :msg="sdf"
   :object="{a:'a'}"
   :cust="100"
  ></child>
 </div>

对应的,也没有渲染出来 

但是也有一些是报错了但是渲染出来的。比如

<div id="app">
  <my-child
   :num="100"
   :msg="'sdf'"
   :object="{a:'a'}"
   :cust="1"
  ></child>
 </div>

所以,这个验证功能多的还是用作于开发,或者说写的组件让别的开发者使用是做的认证。(完全初学不太懂,如果有什么写错或者说这个验证还有什么功能,请在评论写下,先谢谢你了)

总结

以上所述是小编给大家介绍的VueJs组件prop验证简单理解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
javascript基础知识讲解
Jan 11 Javascript
Angular2安装angular-cli
May 21 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JavaScript中Object基础内部方法图
Feb 05 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 #Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 #Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 #Javascript
JavaScript中递归实现的方法及其区别
Sep 12 #Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 #Javascript
React中jquery引用的实现方法
Sep 12 #jQuery
JS+canvas动态绘制饼图的方法示例
Sep 12 #Javascript
You might like
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js单例模式详解实例
2013/11/21 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python去除扩展名的实例讲解
2018/04/23 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python多进程写入同一文件的方法
2019/01/14 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python之pymysql的使用小结
2019/07/01 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
c语言常见笔试题总结
2016/09/05 面试题
安全资料员岗位职责
2013/12/14 职场文书
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
农村文化建设标语
2014/10/07 职场文书
实习单位指导教师评语
2014/12/30 职场文书
高一数学教学反思
2016/02/18 职场文书
Django 实现jwt认证的示例
2021/04/30 Python