Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
在Vue开发中提供组件库时常常需要添加相关属性,用来接收父组件向子组件传递的数据,通常也会给属性设置默认值,那么当属性的类型是Object或者Array类型时如何设置默认值比较合理呢?下面将揭晓这一过程。
(1)刚接触的时候我们可能会习惯这样设置默认值,如下图所示:

不管是String类型还是Object类型,都是直接采用key-value的方式提供default值。这样书写,对String类型是没啥影响,不过对Object类型就会有影响,不过这种影响也只是一种警告,不会导致界面出错,并且这种警告是建立在文件对语法配置的策略之上。
(2)下面将观察一下组件库在父组件应用时提示的警告,如下图所示:

根据警告提示可知,对于Object/Array类型的属性在设置默认值时必须使用工厂函数的方式提供。这里还得说明一下,由于我在两个不同的工程中应用了该组件库,一个工程中不会出现这样的警告,另外一个工程中却提示这样的警告了;所以说这还是跟配置有关系的,具体我还没找到,如有知晓的朋友,麻烦告知一声,再次先谢谢了!
(3)根据警告提示,我们这样修改默认值的设置方式,如下图所示:
或者 
这样处理后,就不会有警告提示了。
------20191219闪
Vue组件库新增的prop属性类型是Object或者Array时默认值的设置的更多相关文章
- ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
前文回顾:Vue+Spring Boot 前后端分离的商城项目开源啦! Vue 组件千千万,只要不行咱就换. ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退 ...
- Vue组件库的那些事儿,你都知道吗?
前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...
- 滴滴开源 Vue 组件库— cube-ui
cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...
- 利用webpack打包自己的第一个Vue组件库
先说一下这篇文章的诞生原因.我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力.要实现这样一个功能 ...
- 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...
- 一、移动端商城 Vue 组件库
一.组件库 移动端商城 Vue 组件库
- 发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下
发布 Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下:https://segmentfault.com/a/1190000011377961 vantUI框架在vue项目中的应用 ...
- vue组件库用markdown生成文档
前言: 开发vue组件库需要提供组件的使用文档,最好是有渲染到浏览器的demo实例,既能操作又能查看源代码.markdown作为常用的文档编写载体,如果能在里面直接写vue组件,同时编写使用说明就再好 ...
- 057——VUE中vue-router之路由参数默认值的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 杭电-------2098 分拆素数和(c语言写)
#include<stdio.h> #include<math.h> ] = { , }; ;//全局变量,用来标志此时已有多少个素数 int judge(int n) {// ...
- 【转载】IPSec-Tools配置
来源:https://blog.csdn.net/zt698/article/details/4811604 1 介绍从Linux 2.6内核开始,内核就自身带有IPSec模块,配合IPS ...
- AF(操作者框架)系列(2)-在Actor框架中派生Actor核心(命令模式)
为了能够提高程序的复用性,我们准备用Actor Framework框架,来演示其满足了这个需求(本章及后面的内容,需要有OOP的基础知识). 首先,简述一下ActorFramework的运行过程: 在 ...
- 最短路径:初涉Dijkstra算法
模板题目:https://www.luogu.com.cn/problem/P1339 我的代码: #include<cstdio> #include<cstring> #in ...
- Ubuntu P40显卡配置CUDA 10.1,CUDNN 7.6,Conda 5.2.0, Tensorflow-gpu 1.8
1. 安装CUDA 禁用nouveau vim /etc/modprobe.d/blacklist.conf 最后两行加入 blacklist nouveau options nouveau mode ...
- opencv —— saturate_cast 溢出保护
src.at<uchar>(i,j)[0] = saturate_cast<uchar>(data); if (data < 0) data = 0; else if ( ...
- Kali Linux中Chrome浏览器不能启动的问题
kali中自带了Chromium Web Browser,我点了几次没反应.我还以为是Chrome的版本问题.于是下载了Chrome的deb包. 安装中还解决了一个包依赖问题.安装成功还是不能启动.于 ...
- Win10的Cortana小娜反应慢?试试这个方法
https://www.ithome.com/html/win10/158466.htm Win10语音助手Cortana小娜可以为用户提供全面的搜索服务,不管是本地还是在线,都可以轻松找到结果.不过 ...
- Process、管理者权限、注册表、xml修改
//判断是否有管理者权限 WindowsPrincipal principal = new WindowsPrincipal(WindowsIdentity.GetCurrent()); if (!p ...
- BSP与HAL关系(转)
板级支持包(BSP)(Board Support Package)是介于主板硬件和操作系统中驱动层程序之间的一层,一般认为它属于操作系统一部分,主要是实现对操作系统的支持,为上层的驱动程序提供访问硬件 ...