Vueを使っているとpropsオブジェクトの中で、defaultといった表記を見かけることがあります。
ここでは、defaultとは何か?いつ使うのか?どう使うのか?について実例を踏まえて解説しています。
defaultとは何か?
defaultは親コンポーネントから子コンポーネントに指定したデータが受け渡されていなくても、エラーにならずに使える便利な機能です。
通常親のテンプレートから子のテンプレートに対して、:msg="msg"
といったようにv-bindでデータを渡す必要があります。
ところが、propsの中のプロパティにdefaultを設定しておけば、親子のコンポーネントから子コンポーネントにデータが渡されていなくても、子のコンポーネントの中で、propsで指定したプロパティが使えます。
defaultの使い方
defaultの使い方は大きく次の2種類に分かれます。
配列とオブジェクト以外(String, Number, Booleanなど)
1つ目は配列とオブジェクト以外(String, Number, Booleanなど)です。
この場合は、通常のプロパティの値を指定するとうに、defaultの後ろに値を記述します。
プロパティ名{ default: 値 }
実例
export default {
props:{
text: { type:String, default:"デフォルトの値です" },
numbers: {type:[Number], default:100 },
}
}
配列とオブジェクト(ArrayとObject)
配列とオブジェクト(ArrayとObject)は関数で記述する必要があります。
default: function () {
return 値
}
functionを省略して、アロー関数で記述することもできます。
default: () => 値
実例
default: function () {
return { message: 'hello' }
}
↑↓ 同じ
default: () => { message: 'hello' }
なお、配列を指定する場合は以下のようになります。
export default {
props:{
arr: {default:()=>[]},
arr2: {default:()=>[ 111, 222, 333 ]},
}
}
関数を設定しない場合のエラー
defaultで関数やオブジェクトを指定するときに、関数としない場合は以下のようなエラーが発生します。
Props with type Object/Array must use a factory function to return the default value.
default以外のバリデーションも合わせて設定する方法
defaultと合わせて、typeなどの型の指定やrequiredなどの他のバリデーションも設定する場合は、プロパティの値はオブジェクト形式で記述する必要があります。
実例
props: {
number: {
type: Number,
default: 100,
required: true
}
},