Vue报错 Invalid default value for prop “XX“: Props with type Object/Array must...问题解决

在使用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: {
    
    
	list: {
    
    
		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]
	}
}