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. AC日记——餐巾计划问题 洛谷 P1084

    餐巾计划问题 思路: 氧气优化水过: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 4005 #define ...

  2. 六十二 Web开发 使用模板

    Web框架把我们从WSGI中拯救出来了.现在,我们只需要不断地编写函数,带上URL,就可以继续Web App的开发了. 但是,Web App不仅仅是处理逻辑,展示给用户的页面也非常重要.在函数中返回一 ...

  3. Linux搭建主从数据库服务器(主从复制）

    配置主机数据库: 1.克隆linux操作系统 2.修改Linux系统主机IP地址 主机IP:192.168.247.150 从机IP:192.168.247.151 3.通过xshell连接Maste ...

  4. SpringBoot学习：整合Mybatis，使用HikariCP超高性能数据源

    一.添加pom依赖jar包: <!--整合mybatis--> <dependency> <groupId>org.mybatis.spring.boot</ ...

  5. Nodejs创建简单的Bot

    官方文档地址:https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-quickstart 前提: 1.你已经 ...

  6. 其实参与QtCreator开发也很容易

    http://bbs.csdn.net/topics/370241186 10个月前发过一个组建Qt团队,共同研究.学习.完善QtCreator的帖子,不过在为QtCreator提交完一个补丁后,就没 ...

  7. [jquery] input值发生变化则触发

    $("#a").val("你好").trigger("change"); $("#a").bind("chan ...

  8. 洛谷P1392 取数 [堆]

    题目传送门 取数 题目描述 在一个n行m列的数阵中,你须在每一行取一个数(共n个数),并将它们相加得到一个和.对于给定的数阵,请你输出和前k小的取数方法. 输入输出格式 输入格式: 第一行,三个数n, ...

  9. scrapy抓取拉勾网职位信息（三）——爬虫rules内容编写

    在上篇中,分析了拉勾网需要跟进的页面url,本篇开始进行代码编写. 在编写代码前,需要对scrapy的数据流走向有一个大致的认识,如果不是很清楚的话建议先看下:scrapy数据流 本篇目标:让拉勾网爬 ...

  10. go chapter 7 - 类型

    任意类型 interface{} 遍历并判断类型 func MyPrintf(args ...interface{}) { for _, arg := range args { switch arg. ...