Invalid default value for prop "pageSizeArr": Props with type Object/Array must use a factory function to return the default value.
Vue
2025-10-30 20:10:47
Invalid default value for prop "pageSizeArr": Props with type Object/Array must use a factory function to return the default value.
这个错误提示表明你在 Vue 组件中定义 pageSizeArr 属性(prop)时,为数组/对象类型的 prop 提供了直接的默认值,而没有使用工厂函数返回默认值。这是 Vue 的 prop 验证规则要求的。
在 Vue 中,当 prop 的类型是 Object 或 Array 时,默认值必须通过工厂函数返回,而不能直接赋值。这是因为对象和数组是引用类型,直接赋值会导致所有组件实例共享同一个引用。
错误示范:
props: {
pageSizeArr: {
type: Array,
default: [10, 20, 50, 100] // 直接赋值数组,这是错误的
}
}正确书写格式
方式一
props: {
pageSizeArr: {
type: Array,
default: () => [10, 20, 50, 100] // 使用箭头函数返回新数组
}
}
方式二
props: {
pageSizeArr: {
type: Array,
default: function() { // 使用普通函数返回新数组
return [10, 20, 50, 100]
}
}
}
对象数据
props: {
config: {
type: Object,
default: () => ({ // 对象也需要工厂函数
pageSize: 10,
total: 0
})
}
}注意项:
开发中关于props默认值的使用需要注意其格式需求。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
898篇文章
38人已阅读
六月初