Vue方向:prop验证

Chase620 等级 381 0 0

我们可以为组件的prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告,这对于开发给他人使用的组件非常有用。

要指定验证规则,需要用对象的形式来定义prop,而不能用字符串数组;

1、验证父组件传递过来的数据类型

props选项值如果为数据,则表示只是单纯的罗列父组件传递过来的数据而已

如果props选项的值是一个对象,那么表示要验证接收的数据类型!

props: {

//属性:属性值

// 接收的数据 : 数据类型(Number,String,Boolean,Object,Array,Function,RegExp )

val : Number

}

验证父组件传过来的数据是Number类型

Vue方向:prop验证

代码

Vue方向:prop验证

渲染结果

Vue方向:prop验证

报错信息

可以很清楚的看见,虽然数据是正常的渲染了,但是报错信息显示,父组件传过来的值的数据类型是与验证不相符的!

如果一个数据需要验证的项非常的多,那么就必须写成对象的写法!

val: {

   type : Number,      //type表示用来验证数据的类型

   default : 0 ,  //default表示如果父组件没有向子组件传参,则使用默认值。

}

2、允许数据传递多种数据类型

如果一个数据可以接受多种数据类型,则使用数组将所有允许的类型罗列在一起。

// 子组件选项

let sonComponent = {

// props 验证数据类型

props: {

myName :String,

myAge :\[ Number , String \],

}

}

3、type的数据类型

验证数据的type属性的值就是原生的构造器(构造函数)

1、String

2、Number

3、Boolean

4、Funciton

5、Object

6、Array

7、Symbol

4、必须传递的数据

有时需要指定一些数据为必须传递的,如果不传递就会报错,这个时候,数据的只是一个对象。

对象就是对于props传递的配置对象

验证的配置对象中

1、type :验证数据类型

2、required:验证数据是否为必须传递,true,是必须传递,不传就会报错

Vue方向:prop验证

父组件代码

Vue方向:prop验证

子组件代码

Vue方向:prop验证

报错信息

结合代码,很显然,父组件没有给子组件传值进来,那么就会触发验证规则,而且,传入的默认项和required项不能不能同时写!

default: () => ({}) //如果是引用类型,默认值必须是一个返回对应类型的函数

default: () => [] //如果是数组,返回对应类型

5、自定义验证规则

let sonCom = {

// 子组件通过props接受数据并使用

//数组里放父组件中自定义属性的名字

//props里面使用驼峰写法

props :{

        myName : {

             type:String,   //验证类型

             default: '张三'   //默认值

      },

        myAge: {

              validator:function(value){

              //自定义验证器

               return   value > 16 //返回true  验证通过,返回false,验证不通过报错!

           }

      }

}

}

本文转自 https://www.jianshu.com/p/b3f30be2218c,如有侵权,请联系删除。

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue方向:prop验证
我们可以为组件的prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告,这对于开发给他人使用的组件非常有用。要指定验证规则,需要用对象的形式来定义prop,而不能用字符串数组; 1、验证父组件传递过来的数据类型props选项值如果为数据,则表示只是单纯的罗列父组件传递过来的数据而已如果props选项的值是一个对象,那么表示要验证接收的
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)(https://www.zhihu.com/people/huobodexiaobaiyang).css1cd9gw4{marginleft:.3em;}545 人赞同了该文章前言
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注