在使用Vue中的Props向组件中传值的时候出现了下面的报错
错误
完整错误信息:
Invalid default value for prop “XX”: Props with type Object/Array must use a factory function to return the default value.
其实看错误信息也就知道了,就是Props在传值类型为Object/Array时,如果需要配置default值(如果没有配置default值,则不会有这个报错),那必须要使用函数来return这个default值,而不能像基本数据类型那样直接写default:xxx
//错误写法
props: {
rlist: {
type:Array,
default: [1, 2, 3, 4, 5]
}
}
如果这样写,就会报上面的错误
解决方法
//正确写法
props: {
rlist: {
type:Array,
default: function() {
return [1, 2, 3, 4, 5]
}
}
}
//当然,我们可以使用箭头函数来写,还显得简单很多
props: {
rlist: {
type:Array,
default: () => [1, 2, 3, 4, 5]
}
}
Vue Props默认值设置

本文详细解析了在Vue中设置Props默认值的正确方法,特别是当Props类型为Object或Array时,必须使用函数返回默认值,而非直接赋值。通过对比错误与正确的代码示例,帮助开发者避免常见的编程陷阱。
1万+

被折叠的 条评论
为什么被折叠?



