vueイベントバス(Event Bus)

busバス
背景の使用
データ表示項目では、サイドメニューバーに展開収縮機能があり、右側の幅が変化しますが、グラフは幅の変化に応じて適応しません.そこでメニューバーの伸縮状態に基づいて手動resizeグラフを作成し,この状態を非兄弟コンポーネント間で伝達する必要があると考え,vueのEvent Busを用いた.
Event Busの使い方
1.Event Busの初期化Event Busの作成方法は2つあります.
1つは1つを作成することである.jsファイル:

import Vue from 'vue';

//    Event Bus
const bus = new Vue();

export default bus;

もう1つはmainです.jsでの初期化

Vue.prototype.$EventBus = new Vue()

2.メニューバーの伸縮ボタンをクリックしたコンポーネント内のイベントを送信するcollpaseイベントを送信し、import bus from'.../common/bus'をステータス(ここでは.jsで実現する)を伝達する.

//      
      collapseChage() {
        this.collapse = !this.collapse;
        bus.$emit('collapse', this.collapse);
      }

3.リスニングイベントは、メニューの縮小に基づいて適応グラフを作成する必要がある作成でリスニングされます.

bus.$on('collapse', msg => {
          setTimeout(function () {
            _this.chart1.resize()
            _this.chart2.resize()
          },500)
      })

4.イベントリスナーを削除イベントのリスナーを削除する必要がある場合は、次のように書くことができます.

import { eventBus } from './event-bus.js'
EventBus.$off('collapse', {})

EventBusも使えますo f(‘c o l l a p s e’)は、アプリケーション内のこのイベントのすべてのリスニングを除去する.あるいは、E v e n t B u sを直接呼び出す.off(‘collapse’)は、アプリケーション内のこのイベントのすべてのリスニングを除去する.またはEventBusを直接呼び出す.off(‘collapse’)は、アプリケーション内のこのイベントのすべてのリスニングを除去する.またはEventBusを直接呼び出す.off()は、パラメータを追加する必要がないことに注意して、すべてのイベントチャネルを除去します.