VuetifyでVue非推奨機能eventBusを使ってみる

非推奨ですが便利な機能eventBus

この機能はVue2の環境でのみ動作します。またVue2においても非推奨となっている機能です。
Vue3では削除されました。VueXを使って同じ動作が出来ますがこれだけの目的でいれるのはどうかと思う。
非推奨とはいえ便利ですので、使う側はサポートの対象外であることを理解していればいいだけの話。

コンポーネント間のイベント通信eventBus

親を通さないでコンポーネント間のイベントがやり取りできる機能です。
親がなくてPHPでコンポーネントを並べているような環境では必要になるのではないかと思う。

サンプル

See the Pen Untitled by nakai1980 (@nakai1980) on CodePen.

サンプル解説

sendTestクリックで受信側にテキスト「test」が送られるそれだけです。
親には何も組み込んでおりません。

<script>
import Vue from "vue";
const bus = new Vue();

// on ComponentA
bus.$emit('test-event', data);

// on ComponentB
bus.$on('test-event', handler);
</script>

サンプルをさらに平たくしたのが上記になります。
emitしたものをonで受け取るだけです。
使い方は下記の様なjsファイルを作成してインポートしてやるのが良いと思います。

bus.js

import Vue from "vue";
export default new Vue();