Vue props中Object和Array设置默认值操作


Posted in Javascript onJuly 30, 2020

我就废话不多说,看代码吧~

seller: {
  type: Object,
  default() {
   return {}
  }
}
seller: {
  type: Object,
  default: function () {
    return {}
 }
}

当父组件没有传这个值或者值是空时,输出的话,返回:

下面这种是错误的

seller: {
  type: Object,
  default: () => {}
}

当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template中获取里面的值时,就报错。

补充知识:解决vue props 默认值为数组或对象时报错的问题

简单粗暴直接上代码:

// 这些写时会报错 Type of the default value for 'record' prop must be a function
 props: {
  record: {
   type: Array,
   default: []
  }
 }
 
// 正确应该这样写
// 因为vue规定,对象或数组默认值必须从一个工厂函数获取
 props: {
  record: {
   type: Array,
   default: function () {
     return []
   }
  }
}

以上这篇Vue props中Object和Array设置默认值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
js闭包实例汇总
Nov 09 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
AngularJS内置指令
Feb 04 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
node.js通过url读取文件
Oct 16 Javascript
vue prop传值类型检验方式
Jul 30 #Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 #Javascript
vue setInterval 定时器失效的解决方式
Jul 30 #Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 #Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 #Javascript
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
You might like
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python pdb调试方法分享
2014/01/21 Python
使用cx_freeze把python打包exe示例
2014/01/24 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python实现控制台打印的方法
2019/01/12 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python使用建议与技巧分享(一)
2020/08/17 Python
详解Python 中的容器 collections
2020/08/17 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
英语求职信范文
2014/05/23 职场文书
2016年会开场白台词
2015/06/01 职场文书
2016年元旦致辞
2015/08/01 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP