首页 > 其他分享 >vue父子组件数据传递props中Object和Array如何设置默认值

vue父子组件数据传递props中Object和Array如何设置默认值

时间:2024-01-30 13:56:40浏览次数:74  
标签:vue return default Object rowData Array 默认值 type

 

 

props: {
    field: {
      type: String
    },
    index: {
      type: Number,
      default: 0
    },
    isAble: {
      type: Boolean,
      default: true
    },
    rowData: {
      type: Object,
      default: function () {
        return {};
      }
    },
    btnArr: {
      type: Array,
      default: function () {
        return [];
      }
    }
}

 

对于复杂数据类型Object和Array,设置默认值的时候需要通过函数的方式进行返回。
以下两种方式都是正确的:

 

rowData: {
   type: Object,
   default() {
      return {}
   }
}

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

 

 

特别注意一点,这里不能简化成箭头函数:

 

// 这种写法是错误的
// 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template中获取里面的值时,就报错
rowData: {
    type: Object,
    default: () => {}
}

 

标签:vue,return,default,Object,rowData,Array,默认值,type
From: https://www.cnblogs.com/yeminglong/p/17996934

相关文章

  • vue 页签图标 icon 修改设置
    最近在写Vue项目时,有一个需求是替换页签的图标,不过在网上查了好久,发现没有一个是生效的最后结合了两篇文章里的内容,才将这个需求实现,现在来记录一下 在vue.config.js文件中添加以下代码: pwa:{iconPaths:{favicon32:'./public/chatmind-logo.svg',......
  • vue建项目要做的事(总结)
    1、建项:vuecreateweb2、常用依赖:npminstallvue-routernpminstalljquerynpminstallpinianpminstallaxiosnpminstallelement-plus3、一些依赖代码路由:https://www.cnblogs.com/twinkler/p/17941069中,第7点pinia:https://www.cnblogs.com/twinkler/p/17946430中,第......
  • 我的新书《ASP.NET Core+Vue.js全栈开发训练营》
    越来越多的工程师们选择使用ASP.NETCore7.0和Vue3来构建现代、高性能的Web应用程序,不仅因为这两种技术的流行和强大,更是因为它们可以相互配合,发挥出更大的优势。作者编写了本书,旨在为读者提供一个全面、实用的学习资源,以掌握使用ASP.NETCore7.0和Vue3构建功能丰富、高效的We......
  • vue部署
    1.虚拟机打包0.本地打包(webstorm)npmrunbuild1.上传工程及镜像#1.将打包好的文件dist压缩,发送到服务器一文件夹内[root@localhost~]#cd/opt/frontend[root@localhostfrontend]#lsdist.zip#2.解压打包的文件[root@localhostfrontend]#unzipdist.zip[root@lo......
  • vue配合什么css框架
    在Vue中使用CSS框架可以提高开发效率和网站外观的一致性。下面是一些与Vue兼容的常见CSS框架:BootstrapVue:BootstrapVue是一个基于Vue.js的Bootstrap组件库。它提供了一套完整的Vue.js组件,同时也支持Bootstrap的所有特性。ElementUI:ElementUI是一套基于Vue.js的组件库......
  • vue安装node-sass sass-loader 报错
    vue安装node-sass  sass-loader报错 主要的原因是因为node的版本 和  node-sass  sass-loader 不匹配导致的报错node-sass版本和sass-loader版本对应 具体查看这个链接   https://www.npmjs.com/package/node-sass拿我当前项目举例  我node版本是16......
  • 为什么不能这样使用 Object.assign(state, { visibilityFilter: action.filter })
    为什么不能这样使用Object.assign(state,{visibilityFilter:action.filter})?在Redux的reducer中,直接使用Object.assign(state,{visibilityFilter:action.filter})来修改状态是不推荐的做法。原因如下:纯函数原则:Redux要求reducer必须是一个纯函数,即给定相同的输入(sta......
  • vue 设置密码添加弱、中、强的校验
    需求:1)需要输入原密码,如果输入的原密码不对,则给出相应提示;2)新密码需要确认,输入两次,且相同,否则系统给出提示;3)新密码长度大于等于6个字符小手18个字符;4)新密码给出密码强度判断,判断规则为:宇母数字符号只有一种则为弱,字母数字符号任意包含两种则为中,字母数字符号包含三种则为强。HTM......
  • .Net Framework:MinIO objectname异常
     minio-dotnetgithub地址:github.com/minio/minio-dotnet1.异常现象:在调用PutObjectAsync/FileExist/FGetObject等方法操作MinIO时,objectname同时包含汉字、英文括号,MinIO内部throw异常:AuthorizationException:Therequestsignaturewecalculateddoesnotmatchthes......
  • 023 数据库学习笔记--修改字段非空+默认值
    第一步:将字段为空的信息更改为默认值第二步:更改字段为非空第三步:设置默认值约束updateTableImageQualitysetImageScore=0whereImageScoreisnullALTERTABLETableImageQualityALTERCOLUMNImageScoreVARCHAR(10)notnullupdateTableImageQualitysetFilmS......