やりたかったこと
こんな感じで孫から祖先の関数を叩きたかった。
結論から先に
こんな感じで階層ごとに親へ$emit
してやる必要があるみたい。
あくまでも親-子の関係しか存在し得ないので、祖先に渡す場合は一旦親を経由する必要がある。
Code
See the Pen Vue - grandchild-emit by tosite (@tosite) on CodePen.
試してみたこと
(実際のコードとは違いますが、やらんとすることは伝わるかと思います。)
<parent @parent-method="parentMethod">
<child @parent-method="parentMethod">
<grand-child @parent-method="parentMethod">
</grand-child>
</child>
</parent>
<parent @parent-method="parentMethod">
<child @parent-method="$parent.parentMethod">
<grand-child @parent-method="$parent.parentMethod">
</grand-child>
</child>
</parent>
こんなことするなら...
Event Bus機能を利用する方がいいのでは。
あるいは Vuex
で状態管理するべきか。
Vue、便利なんだけど難しい。