Vue a signalé une erreur Valeur par défaut non valide pour la prop "XX" : les props de type Object/Array doivent... problème résolu

L'erreur suivante s'est produite lors de l'utilisation de Props dans Vue pour transmettre des valeurs aux composants

erreur

Message d'erreur complet :

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

En fait, vous pouvez voir le message d'erreur, c'est-à-dire que Object/Arraylorsque , si vous devez configurer defaultla valeur ( 如果没有配置default值，则不会有这个报错), vous devez utiliser la fonction pour return这个defaultévaluer, au lieu d'écrire directement comme le type de données de basedefault：xxx

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

Si vous écrivez comme ça, vous signalerez l'erreur ci-dessus

Solution

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