Vue がエラーを報告しました。プロップ「XX」のデフォルト値が無効です: オブジェクト/配列タイプのプロップは必須です...問題は解決されました

Vue で Props を使用してコンポーネントに値を渡すときに次のエラーが発生しました

間違い

完全なエラーメッセージ:

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

実際、エラー メッセージが表示されます。つまり、Props が値 type を渡すObject/Arrayときに、default値 ( ) を設定する必要がある場合は、基本データ型のように直接記述するのではなく、値如果没有配置default值，则不会有这个报错を指定する関数を使用する必要があります。return这个defaultdefault：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]
	}
}