[Vue.js]祖先のイベントを孫から叩くには

2958 ワード
Vue.js Vue.js テキストリンク

やりたかったこと

こんな感じで孫から祖先の関数を叩きたかった。

結論から先に


こんな感じで階層ごとに親へ$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、便利なんだけど難しい。

MQTT
ミームジェネレータを構築することによって反応を学ぶ