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. 查看linux版本及lsb_release安装及一些想法

    https://blog.csdn.net/darkdragonking/article/details/61194308

  2. OpenStack 存储服务 Cinder介绍和控制节点部署 (十三)

    Cinder介绍 OpenStack块存储服务(cinder)为虚拟机添加持久的存储,块存储提供一个基础设施为了管理卷,以及和OpenStack计算服务交互,为实例提供卷.此服务也会激活管理卷的快照和 ...

  3. 如何访问mvc 默认的错误页

    在ActionResult 中: public ActionResult Error() { return View("~/Views/Shared/Error.cshtml"); ...

  4. 洛谷——P2722 总分 Score Inflation（背包）

    P2722 总分 Score Inflation 题目背景 学生在我们USACO的竞赛中的得分越多我们越高兴. 我们试着设计我们的竞赛以便人们能尽可能的多得分,这需要你的帮助 题目描述 我们可以从几个 ...

  5. [Sgu395][bzoj2363]Binary Cat Club

    一道神题…… rzO 发现立杰在初三(http://hi.baidu.com/wjbzbmr/item/4a50c7d8a8114911d78ed0a9据此可以推断)就怒A了此题…… Orz /*** ...

  6. JZYZOJ1372 [noi2002]荒岛野人 扩展欧几里得

    http://172.20.6.3/Problem_Show.asp?id=1372 想法其实很好想,但是我扩展欧几里得还是用得不熟练,几乎是硬套模板,大概因为今天一个下午状态都不大好.扩展欧几里得算 ...

  7. SD 一轮集训 day4 圣城鼠

    非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...

  8. 【推导】【NTT】hdu6061 RXD and functions（NTT）

    题意:给定一个n次多项式f(x)的各项系数,让你求f(x-Σai)的各项系数. http://blog.csdn.net/v5zsq/article/details/76780053 推导才是最关键的 ...

  9. DoTA与人生

    一个dota菜鸟的人生感悟                接触Dota有了快3年之久,3年里可以经历很多东西,经历了很多东西之后就会有很多的感悟,有些感悟抽象的表达不出来,但是借助于dota,可以间接 ...

  10. openfire自定义发送消息

    加入以下类: 这个是xml格式的,解析时可以将xml转成map,参数可自由定义 import org.jivesoftware.smack.packet.PacketExtension; /** * ...