コンポーネント間でdataの受け渡しで出来ること
親コンポーネントの内容に合わせて子コンポーネントの内容も変える事が可能です。
例えばブログサービスをやってる時、親コンポーネントに書いた内容によって、子コンポーネントのタイトルやフォント、文字色なんかを自由に変更させていけます。
propsを使って親から子へデータを渡していくのですが、これが使える様になる表現の幅がめちゃくちゃ広がる超優秀な子です！！
親から子へのデータの渡し方
静的なデータの受け渡し
まず一番簡単な静的な受け渡しの例を見ていきましょう。
以下のコードでは親から子にnumberを渡すことで、「6」が表示されます。
親コンポーネント
この様にそのままpropsに値を代入して子コンポーネントに渡すことが可能です。
今回だとnumberに6を渡しています。
<template>
<子コンポーネント number="6"/>
</template>子コンポーネント
propsにて親からのnumberを受け取ります。
propsの”number”には親から受け取った6が入るので、pタグでの出力にも6が反映されます。
<template>
<p>{{number}}</p>
</template>
<script>
export default{
props:["number"],
}
</script>動的なデータの受け渡し
静的な時と大きくは変わりませんが、親コンポーネントで扱うデータをv-bindで定義していきます。最初に例にあげたブログタイトルの例で見ていきましょう。
親コンポーネント
直接埋め込むのではなく、v-bind(省略系の:)を使ってtitle変数を設定しています。
後にdataにてtitleに値を入れる事が可能です。
<template>
<子コンポーネント :title="title"/>
</template>
<script>
export default {
data(){
return{
title:'今週の出来事'
};
},
</script>子コンポーネント
静的な場合と大きな変化はないです。
propsに親コンポーネントで定義したtitleの値が渡されます。
<template>
<h1>{{title}}</h1>
</template>
<script>
export default{
props:["title"],
}
</script>おまけ キャメルケース、ケバブケースの使い分け
ここでコードの書き方について少しおまけでまとめておきます。
htmlケバブケース、propsキャメルケースで書くと良いでしょう。
ケバブケースとは「total-number」的なやつ。
キャメルケースは「totalNumber」的なやつ。
ついでにパスカルケースは「TotalNumber」的なやつです。
具体的には
props:{
props:["totalNumber"], //propsではキャメルケース
}
~~~~~~
<コンポーネント名 total-number="number"/> //htmlではケバブケース