親コンポーネントから子コンポーネントのメソッドを呼びたいとき（Vue）

Question

親コンポーネントから子コンポーネントのメソッドを呼びたい場面が多々あります。

例えば、
モーダルコンポーネントとボタンコンポーネントを持つ親コンポーネントAが存在します。
ボタンを押すと、モーダルコンポーネント内の中身を初期化（quaggaというライブラリを使ってます）したいです。
ボタンコンポーネントのクリックを@click=""みたいな感じで親コンポーネントAのメソッドを呼び出すことはできますが、そこからモーダルコンポーネント内に定義されている初期化メソッドを呼び出したいときに困ります。

refsを使えば解決できるっぽいのですが、無理やりな感じの解決方法だと思います。

どのようにすれば親コンポーネントから子コンポーネントのメソッドを呼びたいような状況の時、綺麗な書き方になるでしょうか…お願いします！

Answer 1

子コンポーネントの参照を作って、子コンポーネントのメソッドを呼び出すのは何ら問題ないと思います。なぜなら、親コンポーネントは、子コンポーネントが何であるかを知っていて使っているからです。

従って、今回のケースにおいては、難しいことは考えずに素直にrefsを使うのが良いと思います。私個人としては、前述の理由によりイベントよりも綺麗な方法だと思うのですが……。

Comments

[atemu]

ありがとうございます！！

Answer 2

子コンポーネントのcreatedかなんかで、this.$parent.$on('init',function())で
親にイベント登録して、親でthis.$emi('init')とすれば子で登録したイベントを呼び出せるかと。
ただこれだと、コンポーネント同士が密な結合になりがちなので避けたほうが良いかなと思います。

その他の方法だとで、親から子を呼ぶという質問とは異なりますが、
モーダルですと表示非表示を切り替えの値を渡してwatchする方法もあります。
これだと、使い回しのきくコンポーネントになるかと思います。

イメージの足しになればと思いサンプルを作成しました。

-- kaorun343さんの回答をみて
私も親から子の参照は基本的にはOKだと思っています。
モーダルなら、openやcloseのメソッドがあって
それらを親が触れることは理にかなっているので、初期化もそこでやるが良いかと思います。
※主観ではありますが、親でも初期化のようなメソッドに直接アクセスすることはほぼしないかなと思います。

サンプル更新してます。

Comments

[atemu]

サンプルまでありがとうございます！！！大変分かりやすかったです！

Answer 3

コンポーネント間でなにかやりたくなったらVuex使う段階ですね。
とはいえいきなり本格的にVuex使うのは難しいので最初はVuex使わずイベント使うだけでもいいです。

その後は徐々に難しいことを覚えて行けばいいです。
http://qiita.com/nekobato/items/44a7027504a2c65ce664