Vue2でグローバルイベントバスを作成する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

イベントバス/パブリッシュ/サブスクライブパターンは、アプリケーションの無関係なセクションが相互に通信できるようにする方法です。

Vueコンポーネントで使用されるイベントシステムは、イベントバス/パブリッシュ/サブスクライブパターンで使用できます。

注：このチュートリアルはVue2に固有のものです。 Vue 3では、 $ on、$ off、および$onceが削除されました。この機能を提供する外部ライブラリは、推奨です。

この記事では、Vueの強力な組み込みイベントバスを適用します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。

このチュートリアルは、ノードv15.3.0、npm v6.14.9、およびvuev2.6.11で検証されました。

ステップ1—プロジェクトの設定

このチュートリアルでは、@vue/cliで生成されたデフォルトのVueプロジェクトからビルドします。

npx @vue/cli create vue-event-bus-example --default

これにより、デフォルト構成で新しいVueプロジェクトが構成されます：Vue 2、babel、eslint。

新しく作成されたプロジェクトディレクトリに移動します。

cd vue-event-bus-example

他のモジュールやコンポーネントが使用できるように、イベントバスを作成してどこかにエクスポートする必要があります。まず、新しいファイルを作成します。 Vueライブラリをインポートします。次に、そのインスタンスをエクスポートします。

src / event-bus.js

import Vue from 'vue';
export const EventBus = new Vue();

このチュートリアルでは、インスタンスは変数EventBusに設定されています。

基本的に取得しているのは、DOMまたはアプリの他の部分から完全に切り離されたコンポーネントです。その上に存在するのは、そのインスタンスメソッドだけです。

イベントバスを作成したので、それをコンポーネントにインポートし、親コンポーネントと子コンポーネントの間でメッセージを渡す場合に使用するのと同じメソッドを呼び出す必要があります。

次に、EventBus.$emit()を適用してみましょう。

ステップ2—イベントの送信

誰かがアプリをクリックするたびにアプリがクリックされた回数をアプリ全体に通知するコンポーネントを使用するシナリオを考えてみます。

注：この例では、ここで単一ファイルコンポーネントを使用していますが、任意の方法でコンポーネントを作成できます。

EventBus.$emit(channel: string, payload1: any, ...)を使用して実装する方法は次のとおりです。

src / components / ClickCountButton.vue

<template>
  <button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>

<script>
import { EventBus } from '@/event-bus';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      EventBus.$emit('clicked', this.clickCount);
    }
  }
}
</script>

このコードはボタンを生成します。ボタンをクリックすると、ペイロード（clickCount）を含むチャネル（clicked）でイベントが送信されます。

このコンポーネントを使用するには、App.vueを変更してください。

src / App.vue

<template>
  <div id="app">
    <ClickCountButton></ClickCountButton>
  </div>
</template>

<script>
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}
</script>

次に、EventBus.$onを適用してみましょう。

ステップ3—イベントの受信

これで、アプリの他の部分でイベントバスをインポートし、EventBus.$on(channel: string, callback(payload1,...))を使用してclickedチャネルでリッスンできます。

App.vueを変更して、これをアプリケーションに適用します。

src / App.vue

<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}

const clickHandler = function(clickCount) {
  console.log(`The button has been clicked ${clickCount} times!`)
}

EventBus.$on('clicked', clickHandler);
</script>

このコードは、clickedのイベントリスナーを作成し、ボタンがクリックされた回数を含むメッセージをコンソールに記録します。

注：イベントの最初の放出のみをリッスンしたい場合は、EventBus.$once(channel: string, callback(payload1,...))を使用できます。

次に、EventBus.$offを適用してみましょう。

ステップ4—イベントリスナーを削除する

EventBus.$off(channel: string, callback(payload1,...))を使用して、clickedチャネルからハンドラーの登録を解除できます。

App.vueを変更して、これをアプリケーションに適用します。

src / App.vue

<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'

export default {
  name: 'App',
  components: {
    ClickCountButton
  }
}

const clickHandler = function(clickCount) {
  console.log(`The button has been clicked ${clickCount} times!`)
}

EventBus.$on('clicked', clickHandler);

EventBus.$off('clicked', clickHandler);
</script>

イベントとコールバックを提供することにより、EventBus.$offはこの特定のコールバックのリスナーのみを削除します。

注：コールバック引数なしでEventBus.$off('clicked')を使用して、特定のイベントのすべてのリスナーを削除することもできます。

また、チャネルに関係なく、EventBusからすべてのリスナーを本当に削除する必要がある場合は、引数なしでEventBus.$off()を呼び出すことができます。

これで、.$emit、.$on、および.$offを使用しました。

結論

このチュートリアルでは、Vueの強力な組み込みイベントバスを使用してclickedイベントをリッスンし、クリック数を含むメッセージをログに記録しました。これは、.$emit、.$on、および.$offを利用することによって実現されました。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036