コンポーネント同士のやり取りどうするの？

結論

props down, events up

https://gyazo.com/419ce4d74c859ddfe1f07a7626410028

図のとおりですが、親子間のやり取りは下記の２つです。

props経由で親から子に値やオブジェクトを渡す

子から発生したeventを親で受けて、payloadオブジェクトを受け取る

これで、親子間の情報のやり取りが可能になります。

このpayloadは、子から親に情報を受け渡すときによく使います。

例えば、子コンポーネント内のリストの何番目をクリックしたかをpayloadに詰めて渡してもいいですし、

たくさんの情報を親に受け渡したいときには、stringやnumberだけではなく、オブジェクトを作って渡すこともあります。

https://gyazo.com/76c64c6be9a977d2a551925724fa8712

emitするときに渡したpayloadは、親のmethodの引数として受け取れることに注意してください。

https://gyazo.com/d8945cd7a0c8981bcf0908eff8eff220

バケツリレーについて

しかし…

https://gyazo.com/ee85bc32a794a1a05d3df8a0ec88d6cf

当然この階層が増えてくると、それぞれにpropsとemitを書かなくてはいけなくなります。これはつらい。

というわけで、この辛さを解決するために、vuexというライブラリを使います。

最初に作るTODOアプリにバケツリレーは発生しませんよね。であれば、vuexを採用するのは大げさになる可能性が高いです。