コンポーネントオブジェクト(VueConstructor)にpropsを置くと、親に対して「このコンポーネントは A という値が必要だから渡してね」のように伝えることができます。
一番簡単にてっとり早くそれを実装するには単にpropsに渡せるprops名を配列で羅列するだけです。
{
props: [
'foo',
'barBaz'
]
}
これでfooとbarBazというプロパティを受け付けるようになりました。親からは、
<Child foo="a" bar-baz="b" />
のように値を渡すことができます。ご覧の通りbarBazのように設定したプロパティ名はテンプレート上ではfoo-bazのようなケバブケースで使えます。
もし「fooは数値がいい」「bar-bazは関数がいい」という注文がある場合、propsをこのように書き換えます。
{
props: {
foo: Number,
barBaz: Function
}
}
使えるコンストラクタには他に、
String,
Boolean,
Array
Object,
Promise
class で定義したもの何でも
が使えます。つまりコンストラクタなら何でもです。
これで先程のままaやbという値を渡してしまった場合、「Invalid prop: type check failed for prop "<prop名>"」というエラーが出ます。
しかしこれでもまだ不十分なケースがあります。それは値を絶対に渡してほしい場合です。つまり先程までのは、どちらかまたはどちらも渡さなくても通ってしまいます。
<Child :foo="1" />
必須プロパティ
「bar-bazこそ必要なのに」という場合これでは困ってしまいます。Vue はあるプロパティについては必須にするというやり方も提供しています。それには先程のpropsをまた書き換える必要があります。
{
props: {
foo: Number,
barBaz: {
type: Function,
required: true
}
}
}
barBazだけが必須なので、それだけ書き換えてます。barBazをオブジェクトに変えコンストラクタをtypeに、そしてrequired: trueを増やします。
これでbar-bazを渡さなかった時は「Missing required prop: "barBaz"」というエラーがでるようになりました。
デフォルト値
このpropオブジェクトはdefaultというキーを持つことができます。これはprop値が渡されなかった時代わりにそのプロパティ値に設定される値になります。
例のようなものを作りました。分かりづらい人はフォークして実際に触ってみてください。
