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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
javascript操作cookie
2017/01/17 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
本科生导师推荐信范文
2014/05/18 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
师范毕业生求职信
2014/07/11 职场文书
安阳殷墟导游词
2015/02/10 职场文书
元宵节寄语大全
2015/02/27 职场文书
业务内勤岗位职责
2015/04/13 职场文书
闪闪的红星观后感
2015/06/08 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技