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 プロジェクトからビルドします。
- npx @vue/cli create vue-event-bus-example --default
これにより、デフォルト構成の新しい Vue プロジェクトが構成されます: Vue 2
、babel
、eslint
。
新しく作成されたプロジェクト ディレクトリに移動します。
- 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 のトピック ページで演習とプログラミング プロジェクトを確認してください。