Vue.component('my-component',{

            props:{

                //必须是数字类型

                propA:Number,

                //必须是字符串或数字类型

                propB:[String,Number],

                //布尔值，如果没有定义，默认值就是true

                propC:{

                    type:Boolean,

                    default:true

                },

                //数字，而且是必传

                propD:{

                    type:Number,

                    required:true

                },

                //如果是数组或对象，默认值必须是一个函数来返回

                propE:{

                    type:Array,

                    default:function (){

                        return [];

                    }

                },

                //自定义一个验证函数

                propF:{

                    validator:function (value){

                        return value>10;

                    }

                }

            }

        })

验证的type类型可以是：

　　String

　　Number

　　Boolean

　　Object

　　Array

　　Function

type也可以是一个自定义构造器，使用instanceof检测。

当props验证失败时，在开发版本下会在控制台抛出一条警告。

自定义构造器测试：

<body>

    <div id="app">

        {{myObj}}

            <my-component :my-obj="12"></my-component>

            <my-component :my-obj="myObj"></my-component>

    </div>

    <script>

        function MyObj(){

            this.name=1;

            this.age=2;

        }

        var myObj=new MyObj();

        console.log(new MyObj());

        Vue.component('my-component',{

            props:{

                //自定义构造器测试

                myObj:MyObj,

            },

            template:'<div>自定义构造器测试 ——{{myObj}}</div>'

        })

        new Vue({

            el:'#app',

            data:{

                myObj:myObj

            }

        })

    </script>

</body>

显示如下：

传入12时报错

http://www.cnblogs.com/exhuasted/p/7250452.html

vue.js实战——props数据验证（自定义构造器检测）的更多相关文章

  1. vue.js实战——props单向数据流

    Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...

  2. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  3. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  4. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  5. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  6. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  7. JMeter接口测试实战-动态数据验证

    JMeter接口测试实战-动态数据验证 说到验证就不得不说断言, 先来看下JMeter官方给出断言(Assertion)的定义, 用于检查测试中得到的响应数据等是否符合预期,用以保证测试过程中的数据交 ...

  8. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  9. Vue.js实战学习笔记（中）

    1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...

随机推荐

  1. 【Android Studio安装部署系列】三、Android Studio项目目录结构

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 简单介绍下Android studio新建项目的目录结构. 常用项目结构类型 在Android Studio中,提供了以下几种项目结 ...

  2. .NET Core 控制台应用程序使用异步（Async）Main方法

    C# 7.1 及以上的版本允许我们使用异步的Main方法. 一.新建一个控制台应用程序 二.异步Main方法 我们直接将Main方法改为如下: static async Task Main(strin ...

  3. Python编程从入门到实践笔记——字典

    Python编程从入门到实践笔记——字典 #coding=utf-8 #字典--放在{}中的键值对:跟json很像 #键和值之间用:分隔:键值对之间用,分隔 alien_0 = {'color':'g ...

  4. .NET ORM框架 SqlSugar4.0 功能快速预览【开源】

    SqlSugar 4.0 ORM框架的优势 为了未来能够更好的支持多库分布式的存储,并行计算等功能,将SqlSugar3.x全部重写,现有的架构可以轻松扩展多库. 源码下载: https://gith ...

  5. 通过 JSONP 实现跨域请求

    优质参考资料:https://www.cnblogs.com/chiangchou/p/jsonp.html https://blog.csdn.net/hansexploration/article ...

  6. 杭电ACM2022--发工资咯：）

    发工资咯:) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  7. [TCP/IP] 网络层-抓包分析IP数据包首部

    ip数据包的结构:首部+数据部分 1.版本(v4或者v6)+首部长度(固定的20字节,所以就没有)+区分服务优先级(我的例子是 assured forwarding 31 0x1a 26,保证转发) ...

  8. qsv文件转码mp4格式过程记录

    之前帮一个朋友剪辑配音视频,源文件在爱奇艺里,特有的qsv格式让我白忙活一下午. 晚上趁着有空,在网上查找资料,翻阅了很多文件,都让我无从下手. 基本都是一个套路,转成fiv格式,再转mp4格式,但是 ...

  9. Android Studio打包SDK后，为什么没有bundles文件夹？

    在Android Studio中,将项目打包成jar包,按照网上说的方法打包完成后,在intermediates文件夹下没有bundles,AS版本3.1.2,后来发现,原来是intermediate ...

  10. linux/shell/bash 自动输入密码或文本

    linux有些命令需要输入密码,比如ssh或su,又不能通过参数指定,正常只能手动输入.这让人多少有些懊恼,尽管这样很安全! 破解:expect 默认没这个东西,需要安装 apt/yum instal ...