Vue.jsコンポーネント間でデータをやり取りする方法
Vueのコンポーネント間のデータの受け渡しについて一通りインプットしたので、自分の理解のために少し整理してみようと思います
コンポーネントとは何か
Webページを構成する部品のこと
ページを部品（コンポーネント）単位に分解して作ることで管理・メンテナンス・使い回しがしやすくなる
この図のように色々なコンポーネントが集まることで1つのページができる
コンポーネントが入れ子になったり組み合わさっているので、コンポーネント間でデータを
やり取りする必要が出てくるが、コンポーネントで定義されたデータやメソッドには他のコンポーネントからアクセスできないという問題がある
コンポーネント間でデータ等をやり取りできるようになるための一般的な2つの方法をまとめました。
1.プロパティ（親コンポーネント→子コンポーネント）
親コンポーネントでプロパティの設定を行い、子コンポーネント側でプロパティの宣言を行うことでデータをやり取りすることができる
（青：親コンポーネント、赤：子コンポーネント）
子コンポーネントのpropsでプロパティの宣言を行なっている
プロパティの書き方が親子で異なっているが問題ない（my-name と myName）
プロパティをケバブケースで指定して、子コンポーネント側でプロパティをキャメルケースで宣言しても使用できる
もちろん同じ名前にしてもデータのやり取りを行うことができる
2.カスタムイベント（子コンポーネント→親コンポーネント）
子コンポーネントで処理を行なった時に、親コンポーネントにイベントが起こったことを通知すると共に、関連するデータも一緒に渡すことができる
例えば数字（子コンポーネント）がクリックされたことを受け取って、
トータル（親コンポーネント）を変化させる以下のような物を作る場合
この赤い部分のように $emitを使用して子コンポーネントを定義することで実装できる
$emitを使用することでイベントを親コンポーネントに渡すことができる
青い親コンポーネントの部分ではv-onがplusイベントの監視を行なっており、
イベントを受け取ると、受け取った値を加算していく処理が定義されている
v-onにはJavaScriptのイベントハンドラを書くやり方もあるが、この書き方は子コンポーネントで発生させたメソッドを渡すようになっている
（青：親コンポーネント、赤：子コンポーネント）
【参考】
この他にも、スロットを使用して配下のコンポーネントのテンプレートに埋め込む方法などがある
Discussion