徒然畑

徒然なるままに。

【日々学ぶVue】親子コンポネ同士で値を受け渡す様子を擬人化しながら理解する

職場が変わり、職種が変わり、使う言語やフレームワークが変わりで現在Vue使ってWeb制作をしています。
使い出してもうすぐ2ヶ月経つかなーという頃ですが、
まだ知らないことの方が多いので個人的なメモとしてまとめることにしてみました。


親子コンポーネントでの値の受け渡しを例え話にして理解する

f:id:mio_U_M:20180407153145j:plain
個人的に最初読み解き・覚えるのが大変だなと思ったこの構造。
実際に「実在する親子の間のやり取り」と見立てて理解することにしました。

親から子へデータを渡す

f:id:mio_U_M:20180407153136p:plain
子供にとって親とはどういう存在でしょうか。
まだ小さい子供の場合であれば何も知らない我が子に道徳のあれこれや世間のあれこれを教える・・・という存在とも言えるかと思います。
端的に言えば「教えを説き、伝えてる」といった感じです。
そのため、親から子供へ何かを伝えるときは「親の教えを子供が素直に受け止めている状態」と考えてみてください。

◆親側がやること

  1. どの子供に教え(dataなど)を伝えるか、任意で印をつける
  2. 単純な文字列を渡したい場合は名称、dataや式を渡したい場合は名称に:を付けて指定する

◆子供側がやること

  1. 親から伝えられる内容の概説をpropsという場所に設定しておく
  2. 伝わる内容をどこかに生かしたいのであれば、その都度書き起こしておく(上の例だとpタグの中に内容を反映しています)
子から親へデータを渡す

f:id:mio_U_M:20180407153140p:plain
では逆に子供にとって親はどういう存在でしょうか。
色々教授してくれるにはありがたいんですが。。。だからといって言われっぱなしだと反抗もしたくなります。親の意見を鵜呑みにせずに育つのも子供の立派な勤めです。
なので端的にいえば「親に対して喚く」といった感じです。
そのため、「子供が喚くのを親が受け止め対処している状態」と考えてみてください。

◆子供側がやること

  1. 喚く内容は$emitを通してのみ伝わるので、処理の中で喚きたいタイミングで$emitを記述
  2. 小言も言いたい場合(パラメータを渡したい場合)は追加で値を指定できます

◆親側がやること

  1. 親の方が子供よりも一枚上手。なのでどの子供が喚くか印をつけます
  2. その際、子供の喚く内容、喚いた時の対処法も準備しておきます


かなりこじつけ感がありますが、個人的によく忘れてしまうのでこういう形でメモしておくことにしました。
記事とは関係ないですがもっとiPadでお絵かき頑張ろ。