質問: 親コンポーネントから子コンポーネントのメソッドを呼びたい場面が多々あります。 例えば、 モーダルコンポーネントとボタンコンポーネントを持つ親コンポーネントAが存在します。 ボタンを押すと、モーダルコンポーネント内の中身を初期化(quaggaというライブラリを使ってます)したいです。 ボタンコンポーネントのクリックを@click=""みたいな感じで親コンポーネントAのメソッドを呼び出すことはできますが、そこからモーダルコンポーネント内に定義されている初期化メソッドを呼び出したいときに困ります。 refsを使えば解決できるっぽいのですが、無理やりな感じの解決方法だと思います。 どのようにすれば親コンポーネントから子コンポーネントのメソッドを呼びたいような状況の時、綺麗な書き方になるでしょうか...お願いします!
回答: 子コンポーネントのcreatedかなんかで、`this.$parent.$on('init',function())`で 親にイベント登録して、親で`this.$emi('init')`とすれば子で登録したイベントを呼び出せるかと。 ただこれだと、コンポーネント同士が密な結合になりがちなので避けたほうが良いかなと思います。 その他の方法だとで、親から子を呼ぶという質問とは異なりますが、 モーダルですと表示非表示を切り替えの値を渡してwatchする方法もあります。 これだと、使い回しのきくコンポーネントになるかと思います。 イメージの足しになればと思いサンプルを作成しました。 -- kaorun343さんの回答をみて 私も親から子の参照は基本的にはOKだと思っています。 モーダルなら、openやcloseのメソッドがあって それらを親が触れることは理にかなっているので、初期化もそこでやるが良いかと思います。 ※主観ではありますが、親でも初期化のようなメソッドに直接アクセスすることはほぼしないかなと思います。 サンプル更新してます。