Vue で子コンポーネントのメソッドを呼び出す

備忘録。

refs を経由でコンポーネント内で利用している子コンポーネントのメソッドを呼び出す方法について。

子コンポーネント Foo の hello というメソッドを呼び出す場合について考える。

まず子コンポーネントを利用する際に親コンポーネントのテンプレート内で一意な値を持つ ref 属性を付ける。

<foo ref="child1" />
<foo ref="child2">

これにより、親コンポーネントでは $refs.child1, $refs.child2 でそれぞれの Foo インスタンスにアクセスできる。

それぞれのインスタンスのメソッドも data, computed にはダイレクトに参照することができる。

this.$refs.child1.hello()