Vue.js中的父子组件相信都已经是大家很常用到的功能了，

父组件通过props属性向子组件传值
子组件通过自定义事件向父组件传值

那么我们怎么去校验props属性中的类型呢

笔者列出以下几种方法：

1：直接检测

如果将 string 换成Number 那么在控制台是会报错的

2： 数组的方式

同样如果不是相应的类型便会在控制台报错

3：对象的方法

首先如果required为false，那么content不传递也没关系，如果为true，则就会和type中的类型进行匹配，若不是type中的类型便会在控制台报错

4：运用 validator 方法

validator 方法感觉是一个很强大的方法了，我们不仅仅是可以对content进行类型检测了，可以进行更加复杂的操作

组件prop检验的更多相关文章

  1. vue深入了解组件——Prop

    一.Prop的大小写(camelCase vs kebab-case) HTML中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用DOM中的模板时,cameCase ...

  2. vue组件 Prop传递数据

    组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...

  3. VueJs组件prop验证简单理解

    今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子. <div id="app"> <my-child :nu ...

  4. vue中子组件直接修改父组件prop属性bug

    在有些时候,子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题. 比如,父组件传过来的一个对象 checkBoxObj: checkBoxObj:{ checked: false } ...

  5. 深入了解组件- -- Prop

    gitHub地址:https://github.com/huangpna/vue_learn/example里面的lesson08 一 Prop的大小写(camelCase vs kebab-case ...

  6. Vue - 组件 Prop

    组件注册 全局注册 可在多个vue实例中使用 <div id="app"> <my-component></my-component> < ...

  7. 组件Prop验证

    <div id="example"> <kkk></kkk> </div> <script src="https:/ ...

  8. vue-learning：26 - component - 组件三大API之一：prop

    组件三大API之一: prop prop的大小写 prop接收类型 字符串数组形式 对象形式: type / required / default / validator prop传递类型: 静态传递 ...

  9. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

随机推荐

  1. Notepad++7.4.2的配置使用详情

    之前有写过一篇notepad的使用说明,没想到稀里糊涂更新了几次之后,我以前的配置什么的全干掉了,而且我打开新版后,发现和以前还有点不一样了.那就继续这个高级版本再来一边吧. 1.Zen Coding ...

  2. CentOS7安装私有gitlab

    1.安装依赖包 yum install -y curl policycoreutils openssh-server openssh-clients postfix systemctl start p ...

  3. centos xampp 隐藏phpmyadmin地址

    /opt/lampp/etc/extra/httpd-xampp.conf Alias /phpmyadmin "/opt/xampp/phpMyAdmin/" 改为 Alias ...

  4. NBUT 1223 Friends number

    暴力,打表. 计算出每一个数的因子之和,可以枚举$i$,让后将$i$的倍数都加上$i$.发现这样的只有$71$对,然后暴力就可以了. #include<cstdio> #include&l ...

  5. 26、Flask实战第26天：cms用户模型定义

    编辑cms.models.py from exts import db from datetime import datetime class CMSUser(db.Model): __tablena ...

  6. D - Matrix Multiplication ZOJ - 2316 规律题

    Let us consider undirected graph G = which has N vertices and M edges. Incidence matrix of this grap ...

  7. 认识C++中的bitset类型

    认识标准库bitset类型 位是用来保存一组项或者条件的yes/no(1或者0)信息的一种简洁方法,那么位集就是二进制位的有序集.C++中标准库提供的bitset类在我们程序中就很有效的简化了对于位集 ...

  8. cogs 2039. 树的统计

    2039. 树的统计 ★★   输入文件:counttree.in   输出文件:counttree.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 关于树的统计问题有 ...

  9. 【Heap-dijkstra】CDOJ1639 云中谁寄锦书来？雁字回时，月满西楼。

    题意: 在n个点m条边的无向图上,有k个出口 从起点出发,每到一个点(包括起点),该点连出的边中有d条会被封锁 求最坏情况下到达出口的最短路 题解: 该题为dijkstra算法的拓展 由于求最坏情况下 ...

  10. (疯狂java)第四课(上)

    趁着周末玩爽了,兴致来了,继续玩玩java(估计再玩下去,就要被java玩了),第六章实在是很长,那就两个阶段来看吧. 1.java 7的增强包装类 这些包装类就是java上的基本类型,只不过人人基本 ...