Vue自定义组件Props中接收数组或对象

最新推荐文章于 2025-06-18 15:33:42 发布

我是张小程

最新推荐文章于 2025-06-18 15:33:42 发布

阅读量4.6w

点赞数 16

CC 4.0 BY-SA版权

文章标签： props 自定义组件 vue

本文链接：https://blog.youkuaiyun.com/kevinx610/article/details/86559048

本文解析了在Vue中自定义弹框组件时，如何正确设置Array类型的默认值以避免错误。介绍了直接定义空数组作为默认值的问题，并提供了正确的解决方案，即使用工厂函数返回空数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义弹框组件时，需要在弹框内展示商品list，所以需要组件中的对应字段接收一个Array数组，默认返回空数组[]，直接定义空数组报错，如下所示。

 props: {
    content: {
      type: Array,
      default: []
    },
}

报错信息

[Vue warn]: Invalid default value for prop "content": Props with type Object/Array must use a factory function to return the default value.

根据报错信息提示，Object/Array类型不能直接定义空对象或空数组，必须使用工厂函数 return 回一个默认值。

使用谷歌直接搜索该报错信息，发现尤大大本人亲自解答了该问题，
在这里插入图片描述
在线地址：https://github.com/vuejs/vue/issues/1032

于是修改成如下代码，问题解决。

 props: {
    content: {
      type: Array,
      // default: function () { return [] }
      default: () => []
    },
}