Vue.js の非親子間コンポーネントでデータのやり取り

最終更新日
2017.11.16

親子間以外のコンポーネント同士でデータの操作を試す。

前々回で親子間でのデータのやりとりを出来るようになったので、今度は親子間以外での簡単なやりとりを試してみたいと思います。

非親子間のコンポーネントの通信

<div id="app1">
    <friends-member id="f1">サーバル</friends-member>
    <friends-member id="f2">フェネック</friends-member>
    <friends-member id="f3">アライグマ</friends-member>
    <friends-list></friends-list>
</div>

friends-memberfriends-list という親子関係ではないコンポーネントを作りました。

friends-list は元々空のフレンドリストデータを持っていて、friends-member は コンポーネントインスタンスが created されるタイミングで自分の情報を元に friends-list のフレンドリストに登録していきます。動き的にはこんな感じです。

イベントバスを使う

マニュアルの例にあった空のインスタンス var bus = new Vue() を使ってイベントの登録&発火をさせる方法を使ってみました。

元のコンポーネントのイイネをクリックするとカウンタを増やして、カウンタ数値を持ってイベントを起こしリストに反映します。

親を仲介して更新をする

単に兄弟コンポーネントなど構造が単純で固定されている場合両方の親となるコンポーネントを仲介する方法でもいいでしょう。

子コンポーネントA(emit) → 親(props) → 子コンポーネントB

つらくなったら状態管理をしよう

親子間以外でのデータの共有は状態管理をしましょう!と書いてあるんですけど勉強の進行具合的に状態管理はまだまだ先な気がするのでまたその時になったら色々考えましょう。

Vuex 使い方を覚えるとすごく便利だし導入してもパフォーマンスやファイルサイズにあまり影響がないので、使い方を覚えたら特に規模を気にせず気軽につかっても良さそう。

おわりに

なぜリストなのにデータに直接登録しなかったのかというと、このサイトで使うためにちょっとこんな感じのやりたい事があったのですね。データの持ち方と通信方法についてはまだまだ課題です。あと、データの検索の仕方がこれでいいのか、Vue はユニークキーを使って色々しているようなので、もっと簡単に特定出来たりしないのかなぁと思ったり。

続きは次回!実際にサイトで使うコンポーネントを作りたいと思います(•ө•)ノ が、次回の記事書き直してちょっとあれがあれなので、先にその次のウォッチャと NextTick の記事が順序的におすすめです。