概要
Vue.jsのコンポーネント間での通信をまとめました。初心者向けです。
Vuexを使用しない方法と、使用した方法のサンプルを元に説明します。
Vue.jsのみ
See the Pen Vue.js Simple Components Communication by T_Y (@ymnk) on CodePen.
説明
親コンポーネントと子コンポーネントとで相互に通信しているサンプルです。
本やブログには、親から子はprops、子から親はeventと書いてあることが多いです。
ですが、それだけでは不十分だと感じたので、少し丁寧に説明してみます。
親から子へ値を渡す
親コンポーネントのボタンを押すと子コンポーネントの値が増える。
- 子コンポーネント：受け取る値を
propsで設定する。 - 親コンポーネント：子コンポーネントに渡す値を
dataで設定する。 - 子コンポーネントのタグ：
v-bindディレクティブを設定して1と2を紐づける。
親から子のメソッドを実行する
親コンポーネントのボタンを押すと、子コンポーネントのデザインが切り替わる。
- 子コンポーネント：親コンポーネントから実行するメソッドを設定する。
- 子コンポーネントのタグ：
refを設定する。 - 親コンポーネント：
$refsを使い、子コンポーネントのメソッドを実行する。
子から親のメソッドを実行する
子コンポーネントのボタンを押すと、親コンポーネントの値が増える。
- 親コンポーネント：子コンポーネントから呼び出すメソッドを設定する。
- 子コンポーネントのタグ：
v-onディレクティブを設定し、子コンポーネントから1を実行できるようにする。 - 子コンポーネント：
$emitを使って2を実行する。
Vue.js + Vuex
See the Pen Vue.js Components Communication With Vuex by T_Y (@ymnk) on CodePen.
説明
Vuexは複雑なアプリケーションの状態管理をするためのライブラリです。適切なデータフローを設計するために使います。
値をstoreで一括管理することで、どのコンポーネントからでも使用できるようになります。
サンプルでは、親コンポーネントのボタンからstoreを更新し、子コンポーネントで値を表示しています。
Storeの説明
| 名前 | 役割 | 呼び出し方 |
|---|---|---|
| state | 値の一覧 | store.state.名前 |
| getters | 値の取得 | store.getters('名前') |
| mutations | 値の設定 | store.comit('名前', 値) |
| actions | 値の計算と設定 | store.dispatch('名前') |
注意事項
- 単一コンポーネント使った場合、呼び出しは
storeでなくthis.$storeと書く。 -
stateはstore.stateで直接呼ばず、gettersに統一するようルール化するとよい。