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. 微擎系统BUG漏洞解决方法汇总（原创）

    微擎微赞系统BUG漏洞解决方法汇总 弄了微擎系统来玩玩,发觉这个系统BUG还不少,阿里云的提醒都一大堆,主要是没有针对SQL注入做预防,处理的办法基本都是用转义函数. 汇总: 1. 漏洞名称: 微擎任 ...

  2. [水煮 ASP.NET Web API2 方法论]（1-5）ASP.NET Web API Scaffolding（模板）

    问题 我们想快速启动一个 ASP.NET Web API 解决方案. 解决方案 APS.NET 模板一开始就支持 ASP.NET Web API.使用模板往我们的项目中添加 Controller,在我 ...

  3. 前端读者 | 前端构建工具Gulp

    @羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...

  4. Lucene.Net无障碍学习和使用：搜索篇

    一.初步认识搜索 先从上一篇示例代码中我们摘录一段代码看看搜索的简单实现: private TopDocs Search(string keyword,string field) { TopDocs ...

  5. react native native module

    React Native Native Modules,官方地址:https://facebook.github.io/react-native/docs/native-modules-android ...

  6. 洛谷——P2009 跑步

    P2009 跑步 题目背景 跑步是一项有意思的运动,尤其是可以开发人的脑筋.常神牛很喜欢跑步. 题目描述 常神牛跑步的场地是一个多边形(边数≤20,每个顶点用英文大写字母表示),并且在这个多边形内部, ...

  7. 【UOJ #179】线性规划 单纯形模板

    http://uoj.ac/problem/179 终于写出来了单纯性算法的板子,抄的网上大爷的qwq 辅助线性规划找非基变量时要加个随机化才能A,我也不知道为什么,卡精度吗? 2017-3-6UPD ...

  8. Problem H: 零起点学算法103——查找最大元素

    #include<stdio.h> #include<string.h> int main() { ]; while(gets(a)!=NULL) { ]; ;a[i]!='\ ...

  9. BUG:upstream timed out (10060: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected

    更换Apache扑向Nginx,刚搭建完WNMP,nginx能访问php页面 但是访问现有开发项目报错 [error] 4112#3724: *9 upstream timed out (10060: ...

  10. 8VC Venture Cup 2016 - Elimination Round A. Robot Sequence 暴力

    A. Robot Sequence 题目连接: http://www.codeforces.com/contest/626/problem/A Description Calvin the robot ...