ウェブサイト検索

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


序章

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

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

注: このチュートリアルは Vue 2 に固有のものです。Vue 3 では、推奨されます。

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

前提条件

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

  • Node.js をローカルにインストールします。これは、「Node.js をインストールしてローカル開発環境を作成する方法」に従って実行できます。
  • Vue.js コンポーネントの使用にある程度精通していると役立つ場合があります。

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

ステップ1-プロジェクトのセットアップ

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

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

これにより、デフォルト構成の新しい Vue プロジェクトが構成されます: Vue 2babeleslint

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

  1. cd vue-event-bus-example

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

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

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

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

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

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

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

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

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

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

<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 を変更して、このコンポーネントを使用します。

<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, ...)).

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 を変更して、これをアプリケーションに適用します。

<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 のトピック ページで演習とプログラミング プロジェクトを確認してください。

関連記事: