Vue.js の親子間以外でデータのやり取りをする

フロント開発がもっと楽しくなる!Vue.js 学習メモ。親子間ではないコンポーネント同士でデータの操作を試す。

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

<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 はユニークキーを使って色々しているようなので、もっと簡単に特定出来たりしないのかなぁと思ったり。

続きは次回!実際にサイトで使うコンポーネントを作りたいと思います(•ө•)ノ

Edited on 2017.03.19 Created on 2017.02.20 Vue.js JavaScript Webデザイン