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 相关文章推荐
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
php横向重复区域显示二法
2008/09/25 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
图片按比例缩放函数
2006/06/26 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python中的错误处理
2016/04/10 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Python 解决相对路径问题:"No such file or directory"
2020/06/05 Python
教师队伍管理制度
2014/01/14 职场文书
保密普查工作实施方案
2014/02/25 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016猴年春节问候语
2015/11/11 职场文书
检举信的写法
2019/04/10 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫