Vue——[Props with type Object/Array must use a factory function to return the default value.]解决方案

最新推荐文章于 2024-03-13 17:08:15 发布

Starzkg

最新推荐文章于 2024-03-13 17:08:15 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： Vue JavaScript props

本文链接：https://blog.csdn.net/weixin_43272781/article/details/105166967

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文详细解析了Vue.js中对于类型为Object或Array的PROPS如何正确设置默认值的问题，强调了必须使用工厂函数返回默认值的重要性，并提供了错误与正确代码示例对比。

问题描述

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

官方文档

https://cn.vuejs.org/v2/guide/components-props.html

问题分析

Prop“值”的默认缺省值：Type对象/数组的PROPS必须使用工厂函数返回默认值。

如果参数类型是 Array 或 Object ，默认值必须是由工场函数返回，不能直接赋值。

解决方案

错误代码：

proE: {
    type: Array,
    default: []
}

正确代码：

proE: {
    type: Array,
    default: () => []
}

注意事项：当是 Object 类型时，而且又使用箭头函数时，如果设置默认值为空对象，必须加上括号

错误代码：
proE: {
    type: Object,
    default: () => {}
}
正确代码：
proE: {
    type: Object,
    default: () => ({})
}