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

更新日
2017.06.15
作成日
2017.02.20

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

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

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

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

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

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

データのやりとりを試したかったので、元のコンポーネントのイイネをクリックするとリスト側のデータのカウンターが増えるようにして、カウンタを持ってレスポンスを返して元のコンポーネントにある数値も増えるようにしました。

イベントバスを使う

マニュアルの例にあった空のインスタンス var bus = new Vue() を使ってイベントの登録&発火をさせる方法を使いました。this を持たせるのは良くないみたいなので、子側からはコールバックを使ってカウントを変えるように変えました。

大きなアプリは状態管理しよう

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

まとめ

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

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