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. php 公历农历互相转换

    废话不多,直接上代码 <?php class Lunar { /** * Created by 闻海南. * User: timeless * Date: 2018-5-29 * Time: 上 ...

  2. 走进 MvvmLight for Xamarin.Forms

    一.Xamarin.Forms 不使用框架时的绑定 需要注意的是BindingContent,不是DataContent <ContentPage xmlns="http://xama ...

  3. Codeforces 1082 C. Multi-Subject Competition-有点意思 (Educational Codeforces Round 55 (Rated for Div. 2))

    C. Multi-Subject Competition time limit per test 2 seconds memory limit per test 256 megabytes input ...

  4. 洛谷——P2239 螺旋矩阵

    P2239 螺旋矩阵 题目描述 一个n行n列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第1行第1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵中 ...

  5. WebService的网络协议

    SOAP协议.XML-RPC以及Hessian 是WebService的主要传输(编码)协议 SOAP即简单对象访问协议(Simple Object Access Protocol),它是用于交换XM ...

  6. JZYZOJ 1542 [haoi2015]str 矩阵乘法 dp

    http://172.20.6.3/Problem_Show.asp?id=1542 dp+矩阵乘法思路hin好想,对于我这种题目稍微学术就几乎什么也不会的人来说唯一的难点在于读题,因为一心想着划水题 ...

  7. [USACO 2018 Feb Gold] Tutorial

    Link: USACO 2018 Feb Gold 传送门 A: $dp[i][j][k]$表示前$i$个中有$j$个0且末位为$k$的最优解 状态数$O(n^3)$ #include <bit ...

  8. Python学习札记

    Python是很多公司都在使用的一种脚本语言,其语法与Perl.C++.JAVA等都大同小异.本文仅对一些比较常用的语法结构进行总结,比如字典.列表.正则匹配.读写文件等.供广大喜爱Python的同学 ...

  9. 随机数选择器 Exercise07_13

    import java.util.Scanner; /** * @author 冰樱梦 *时间:2018年下半年 *题目:随机数选择器 */ public class Exercise07_13 { ...

  10. Problem B: 输入3个字符串，按由小到大顺序输出

    #include<stdio.h> #include<string.h> int main() { ],b[],c[],t[]; while(gets(a)!=NULL) { ...