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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
javascript实现的简单计时器
Jul 19 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
JavaScript 实现页面滚动动画
Apr 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
Python实现截屏的函数
2015/07/25 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python妙用之编码的转换详解
2017/04/21 Python
Python虚拟环境项目实例
2017/11/20 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
考博专家推荐信模板
2013/12/02 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
品德评语大全
2014/05/05 职场文书
比赛口号大全
2014/06/10 职场文书
假期安全教育广播稿
2014/10/04 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年科技工作总结
2014/11/26 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
刑事撤诉申请书
2015/05/18 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
Javascript设计模式之原型模式详细
2021/10/05 Javascript