在Vue开发中提供组件库时常常需要添加相关属性,用来接收父组件向子组件传递的数据,通常也会给属性设置默认值,那么当属性的类型是Object或者Array类型时如何设置默认值比较合理呢?下面将揭晓这一过程。

  (1)刚接触的时候我们可能会习惯这样设置默认值,如下图所示:

不管是String类型还是Object类型,都是直接采用key-value的方式提供default值。这样书写,对String类型是没啥影响,不过对Object类型就会有影响,不过这种影响也只是一种警告,不会导致界面出错,并且这种警告是建立在文件对语法配置的策略之上。

  (2)下面将观察一下组件库在父组件应用时提示的警告,如下图所示:

  

  根据警告提示可知,对于Object/Array类型的属性在设置默认值时必须使用工厂函数的方式提供。这里还得说明一下,由于我在两个不同的工程中应用了该组件库,一个工程中不会出现这样的警告,另外一个工程中却提示这样的警告了;所以说这还是跟配置有关系的,具体我还没找到,如有知晓的朋友,麻烦告知一声,再次先谢谢了!

  (3)根据警告提示,我们这样修改默认值的设置方式,如下图所示:

    或者  

  这样处理后,就不会有警告提示了。

------20191219闪

Vue组件库新增的prop属性类型是Object或者Array时默认值的设置的更多相关文章

  1. ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!

    前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...

  2. Vue组件库的那些事儿,你都知道吗?

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  3. 滴滴开源 Vue 组件库— cube-ui

    cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...

  4. 利用webpack打包自己的第一个Vue组件库

    先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...

  5. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  6. 一、移动端商城 Vue 组件库

    一.组件库 移动端商城 Vue 组件库

  7. 发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下

    发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下:https://segmentfault.com/a/1190000011377961 vantUI框架在vue项目中的应用 ...

  8. vue组件库用markdown生成文档

    前言: 开发vue组件库需要提供组件的使用文档,最好是有渲染到浏览器的demo实例,既能操作又能查看源代码.markdown作为常用的文档编写载体,如果能在里面直接写vue组件,同时编写使用说明就再好 ...

  9. 057——VUE中vue-router之路由参数默认值的设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  2. Android中实现一个简单的逐帧动画(附代码下载)

    场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...

  3. 全面解析百度大脑发布“AI开发者‘战疫’守护计划”

    即日起,百度大脑发布“AI开发者战疫守护计划” 大疫当前,人人有责,携手开发者共同出击抗击疫情 基于百度大脑AI开放平台和飞桨深度学习平台,积极运用算法.算力.软件等“武器”助力抗疫!   谁能参与计 ...

  4. MySQL安全管理

    数据库服务器通常包含关键的数据,确保这些数据的安全和完整需要利用访问控制. 一.访问控制 MySQL服务器的安全基础:用户应该对他们需要的数据具有适当的访问权,既不能多也不能少. 访问控制:你需要给用 ...

  5. HDFS基本命令fs的使用操作

    HDFS(Hadoop Distributed File System)就是hadoop分布式文件系统,fs是操作HDFS文件的一个常用命令. 1.hadoop fs -help 查看fs使用帮助 2 ...

  6. Jenkins集成jacoco收集单元测试覆盖率

    Jenkins集成jacoco收集单元测试覆盖率 2020-02-28 目录 0 整体思路1 Jenkins创建JacocoIntegrateTestDemo项目2 配置源码管理3 配置Build4 ...

  7. python-20-迭代器是个什么东西?

    前言 迭代器.生成器.装饰器都有一个“器”,但他们之间没有什么关系. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退. 迭代器有两个基本的方法:iter()  ...

  8. 非常简洁简单的tcp socket库 XKSocket

    一个非常简洁简单的异步tcp socket库,主要就是分包的问题,处理组包,粘包等问题 非常适合新手:) 项目中带有使用示例. http://git.oschina.net/dreamzgj/XKSo ...

  9. python部署到服务器

    python部署到服务器 linux下的CentOS 7 自带python2.7.5, 使用 python --version 命令查看,因系统需要python2.7.5,因此我们并不卸载,另外安装p ...

  10. beego orm的使用

    在使用beego model 去操作数据库时 有一些疑惑  找到了一个比较好的博文 原文地址 : https://my.oschina.net/u/252343/blog/829912 (Kelvin ...