解 説

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

コンポーネントを作成するときにコンポーネント間のデータをやりとりする方法は重要な概念となります。
この仕組みをいい加減にすると混乱の原因となります。そのため、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にありますので参考にしてください。