Vue reported an error Invalid default value for prop “XX“: Props with type Object/Array must...problem solved

The following error occurred when using Props in Vue to pass values ​​to components

mistake

Full error message:

Invalid default value for prop “XX”: Props with type Object/Array must use a factory function to return the default value.

In fact, you can see the error message, that is, Object/Arraywhen , if you need to configure defaultthe value ( 如果没有配置default值，则不会有这个报错), you must use the function to return这个defaultvalue, instead of writing directly like the basic data typedefault：xxx

//错误写法
props: {
    
    
	list: {
    
    
		type:Array,
		default: [1, 2, 3, 4, 5]
	}
}

If you write like this, you will report the above error

Solution

//正确写法
props: {
    
    
	rlist: {
    
    
		type:Array,
		default: function() {
    
    
			return [1, 2, 3, 4, 5]
		}
	}
}
//当然，我们可以使用箭头函数来写，还显得简单很多
props: {
    
    
	rlist: {
    
    
		type:Array,
		default: () => [1, 2, 3, 4, 5]
	}
}