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. 用matplotlib绘制漫画风格的图表

    自从有了计算机,便很少有人手工绘制图表了.计算机绘制出的图表横平竖直,可以随意使用各种颜色,也完全不用担心画错需要重来的问题. 但有没有一种感觉,看多了工整的图表,变得有些审美疲劳.在各行各业逐渐过渡 ...

  2. 关于在C#中对函数重载理解

    函数重载是个什么概念,才接触的这个概念的时候我也是完全昏了,还在自己看看了书后就理解了.那什么是函数重载呢?我个人理解的是在同一个作用域下有多个同名的函数,但是他们的形参的类型是不同的,或者参数个数是 ...

  3. Django2.x版本在生成数据库表初始化文件报错

    1.待创建的表信息 from django.db import models # Create your models here. class Book(models.Model): name=mod ...

  4. 软件包管理yum

    (1)yum基础源 1)国内yum源地址 mirrors.aliyun.com //阿里有基础源和epel源 mirrors.163.com 查看使用帮助 2)更换yum源为阿里云(Centos7为例 ...

  5. 转：Super Awesome Fuzzing, Part One

    转:https://labsblog.f-secure.com/2017/06/22/super-awesome-fuzzing-part-one/ An informative guide on u ...

  6. javascript获取dom的下一个节点方法

    需求说明: 获取当前节点左节点或者右节点(兄弟节点): css: <style type="text/css"> a:focus { outline: none; } ...

  7. 【Kubernetes】在K8s中创建StatefulSet

    在K8s中创建StatefulSet 遇到的问题: 使用Deployment创建的Pod是无状态的,当挂在Volume之后,如果该Pod挂了,Replication Controller会再run一个 ...

  8. 【SPOJ Query on a tree 】 (树链剖分)

    http://acm.hust.edu.cn/vjudge/problem/13013 题意: 有一棵N个节点的树(1<=N<=10000),N-1条边,边的编号为1~N-1,每条边有一个 ...

  9. 在intellij idea 中进行android 单元测试

    本次用来测试的代码是sqlite进行数据操作. ######右键选择要进行单元测试的应用 #############弹出选择框,选择Android>Test Module>Next ### ...

  10. CodeForces - 875D High Cry

    题面在这里! 直接考虑每个位置成为最右边的最大值的位置,统计不合法区间,补集转化一下就好啦. 复杂度O(N * 30) #include<bits/stdc++.h> #define ll ...