Vue ドキュメントでのイベント バス関数の使用方法

Vue ドキュメントのイベント バス関数の使用方法

Vue 開発では、異なるコンポーネント間でデータを転送したり、メソッドを呼び出したりする必要がよくあります。イベント バスは、コンポーネント間の通信を実装するためのシンプルかつ柔軟な方法を提供します。

イベント バスは、コンポーネントが相互に通信できるようにする Vue インスタンスの一部です。簡単に言えば、イベント バスはコンポーネント間の通信に使用できる Vue インスタンスです。つまり、イベントバスを利用してコンポーネント間の情報伝達やメソッド呼び出しを実現することができます。

使用法:

イベント バスを使用する最初のステップは、Vue インスタンスでイベント バスをインスタンス化することです。 main.js ファイルでイベント バスをインスタンス化し、Vue プロトタイプにマウントできます。

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

上記のコードでは、Vue.prototype. を通じて $bus オブジェクトを Vue インスタンスに追加し、それを新しい 1 つの Vue インスタンスに割り当てました。このようにして、$bus オブジェクトを通じてコン​​ポーネント間で通信できます。

イベント バスを使用してイベントのパブリッシュとサブスクライブを行う

次に、$bus オブジェクトを使用してイベントのパブリッシュとサブスクライブを行うことができます。イベントをサブスクライブする必要があるコンポーネントで $bus.$on() メソッドを使用してイベントをサブスクライブできます。イベントがトリガーされると、コールバック関数が実行されます。

たとえば、コンポーネント A では、foo という名前のイベントがサブスクライブされます。

this.$bus.$on('foo', (msg) => {
  console.log(msg)
})

同じ名前の foo イベントがコンポーネントでトリガーされます。 B :

this.$bus.$emit('foo', 'this is message from component B')

これにより、コンポーネント A のコンソールに this is message from コンポーネント B が出力されます。

イベント バスを使用してメソッドを呼び出す

イベントのパブリッシュとサブスクライブに加えて、$bus.$emit() メソッドを使用してメソッド呼び出しを実行することもできます。 。このメソッドの呼び出し方法を関数呼び出しともいいます。

コンポーネント A で handleClick() メソッドを定義します:

methods: {
  handleClick(msg) {
    console.log(msg)
  }
}

コンポーネント B で $bus.$emit() メソッド呼び出しを使用します #コンポーネント A の ##handleClick() メソッド:

this.$bus.$emit('handleClick', 'this is a test message')

これにより、コンポーネント A のコンソールに

this is a test message が出力されます。

概要:

イベント バスを使用すると、イベントを簡単にパブリッシュおよびサブスクライブし、Vue コンポーネント間でメソッドを呼び出すことができます。イベント バスには Vue 開発における幅広いアプリケーション シナリオがあり、コンポーネント間の通信をより適切に整理および管理するのに役立ちます。

以上がVue ドキュメントでのイベント バス関数の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。