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 相关文章推荐
js中符号转意问题示例探讨
Aug 19 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
JavaScript 巧学巧用
May 23 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
JS实现分页导航效果
2020/02/19 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
党支部书记先进事迹
2014/01/17 职场文书
经典洗发水广告词
2014/03/13 职场文书
洗手间标语
2014/06/23 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
学校食堂管理制度
2015/08/04 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP