🗂

Vue.jsコンポーネント間でデータをやり取りする方法

2022/01/04に公開

Vueのコンポーネント間のデータの受け渡しについて一通りインプットしたので、自分の理解のために少し整理してみようと思います

コンポーネントとは何か

Webページを構成する部品のこと
ページを部品(コンポーネント)単位に分解して作ることで管理・メンテナンス・使い回しがしやすくなる

この図のように色々なコンポーネントが集まることで1つのページができる
コンポーネントが入れ子になったり組み合わさっているので、コンポーネント間でデータを
やり取りする必要が出てくるが、コンポーネントで定義されたデータやメソッドには他のコンポーネントからアクセスできないという問題がある

コンポーネント間でデータ等をやり取りできるようになるための一般的な2つの方法をまとめました。

1.プロパティ(親コンポーネント→子コンポーネント)

親コンポーネントでプロパティの設定を行い、子コンポーネント側でプロパティの宣言を行うことでデータをやり取りすることができる
(青:親コンポーネント、赤:子コンポーネント)

子コンポーネントのpropsでプロパティの宣言を行なっている

プロパティの書き方が親子で異なっているが問題ない(my-name と myName)
プロパティをケバブケースで指定して、子コンポーネント側でプロパティをキャメルケースで宣言しても使用できる
もちろん同じ名前にしてもデータのやり取りを行うことができる

2.カスタムイベント(子コンポーネント→親コンポーネント)

子コンポーネントで処理を行なった時に、親コンポーネントにイベントが起こったことを通知すると共に、関連するデータも一緒に渡すことができる

例えば数字(子コンポーネント)がクリックされたことを受け取って、
トータル(親コンポーネント)を変化させる以下のような物を作る場合

この赤い部分のように $emitを使用して子コンポーネントを定義することで実装できる
$emitを使用することでイベントを親コンポーネントに渡すことができる

青い親コンポーネントの部分ではv-onがplusイベントの監視を行なっており、
イベントを受け取ると、受け取った値を加算していく処理が定義されている
v-onにはJavaScriptのイベントハンドラを書くやり方もあるが、この書き方は子コンポーネントで発生させたメソッドを渡すようになっている
(青:親コンポーネント、赤:子コンポーネント)

【参考】
https://jp.vuejs.org/v2/guide/events.html

この他にも、スロットを使用して配下のコンポーネントのテンプレートに埋め込む方法などがある

Discussion

ログインするとコメントできます