Vue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。 親子コンポーネント間についてはProps down/Events upでデータのやりとりができる。 子子コンポーネント間(いわゆる兄弟間)はどうするのが良いのかを3つのパターンを紹介する。 $on/$emitでのイベントによるやり取り 親コンポーネントをコントローラにして子コンポーネント間を取り持つ Storeパターンの適用 親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。 $on/$emitでのイベントによるやり取り 一番簡単なのが、この$on/$emitでのイベントによるやり取り。 共有のViewModel(vueインスタンス)を用意し、そこにイベントを登録/発火させることで親子に関係なくデータ
![[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/448f477e6fb92d451d6a0665b7ad21a4abe526ca/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEhFfb5jSuCxUgirxVTp8mLr3n_o8OPMZ80IRuP83CgT3Hk33XnoBZY0Ib-YZYiJ4nOHsO5KeMGMWQFzugGvGnS96kfss5u7x66-qfw9K9zTrM8DvWnaQFz-jUAh5WwPiSIQE6XYmGZgRUt1%2Fw1200-h630-p-k-no-nu%2Fstate-management.png)