解 説

コンポーネントのデータのやりとりについて

コンポーネントを作成するときにコンポーネント間のデータをやりとりする方法は重要な概念となります。 この仕組みをいい加減にすると混乱の原因となります。そのため、Vue.jsでは親コンポーネントから子コンポーネント間のデータを渡す方法としてpropsを使う方法が用意されています。 また、子コンポーネントから親コンポーネントにデータを渡す方法としてはイベントを使用するようになっています。 今回は親コンポーネントにdataプロパティを置いて状態を保存して置いて、そのデータを子コンポーネントに渡して使う方法についての解説です。 子コンポーネントにデータを渡すには propsオプションを使います。 propsを使ってデータを渡す仕組みは、HTML側で使うコンポーネント名のタグにv-bind属性を使ってデータを渡します。 具体的には、親コンポーネントにはdataオプションを用意してデータを保存しておきます。 次に、子コンポーネントにはpropsオプションを定義します。その際にv-bind属性で指定する名前を決めておきます。この時の名前の決め方が重要です。 ここでの命名はJavaScriptの規則でハイフンは使えませんので、キャメルケースで名前をつけます。そして今度はその名前をコンポーネント名のタグ内の属性として使用する場合にはケバブケースで記述する必要があります。ここは紛らわしいですから気をつけましょう。 また、データ型やデフォルト値などを定義することができます。 propsオプションは子コンポーネントで次のように定義します。
Vue.component(コンポーネント名,{ props:{ 親から受け取る属性名:{    type:データ型    default:デフォルト値    required:trueかfalse    validator:バリデーション用関数    }   } }

簡単なデータの渡し方

サンプルはGitHubを参考にしてください。

複雑なデータの渡し方

サンプルはGitHubにありますので参考にしてください。