VUE3 基本チュートリアル: Vue.js イベント バスの使用

Vue.js は人気のあるフロントエンド JavaScript フレームワークであり、そのイベント バスはそのコア機能の 1 つとして存在します。 Vue.js では、イベント バスはコンポーネント間の通信の媒体として機能します。この記事ではVue.jsのイベントバスの使い方を紹介します。

イベントバスとは何ですか?

イベント バスは、中央のイベント バス パターンの実装です。簡単に言えば、イベント バスはアプリケーション内のどこでも使用できるグローバル Vue インスタンスです。これはコンポーネント間の通信の媒体として機能します。

Vue.js はイベント バスを Vue.prototype にマウントします。つまり、イベント バスは Vue インスタンスの一部であるため、アプリケーションのどこでも使用できます。

イベントバスを設定するにはどうすればよいですか?

イベント バスのセットアップは非常に簡単で、新しい Vue インスタンスで宣言するだけです。 main.js ファイルに次のコードを追加できます:

Vue.prototype.$bus = new Vue();

このコード行は、Vue インスタンスをインスタンス化し、Vue.prototype にマウントして、Vue インスタンスを作成します。これで、任意のコンポーネントで $bus を使用できるようになります。

コンポーネント間でメッセージを送信するにはどうすればよいですか?

イベント バスを使用したコンポーネント間でのメッセージの送信は非常に簡単です。必要なのは、あるコンポーネントでメッセージを送信し、別のコンポーネントでメッセージをリッスンすることだけです。例を見てみましょう:

// 组件 A
this.$bus.$emit('message', 'hello from A');

// 组件 B
this.$bus.$on('message', message => {
  console.log(message); // hello from A
});

コンポーネント A では、$emit メソッドを使用して、データ「hello from A」を含む「message」メッセージを送信します。コンポーネント B では、$on メソッドを使用して「message」メッセージをリッスンし、コールバック関数でメッセージを処理します。

コンポーネントが破棄されるときは、メモリ リークを避けるために $off メソッドを使用してイベント リスナーを削除する必要があることに注意してください。

アプリケーションでイベントバスを使用するにはどうすればよいですか?

イベント バスを設定してコンポーネント間でメッセージを送信する方法がわかったところで、それをアプリケーションでどのように使用しますか?簡単な例を次に示します。

// App.vue
<template>
  <div>
    <router-view />
    <button @click="sendMessage">Send message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('message', 'hello from App');
    }
  }
};
</script>

// Home.vue
<template>
  <div>
    <h1>Welcome Home</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('message', message => {
      this.message = message;
    });
  }
};
</script>

この例では、App.vue で「メッセージ」メッセージを送信できるボタンを定義します。 Home.vue では、$on メソッドを使用して「message」メッセージをリッスンし、ページにメッセージを表示します。

概要

イベント バスは、コンポーネント間の通信を実現するのに役立つ非常に重要な Vue.js 機能です。 $emit メソッドと $on メソッドを使用すると、コンポーネント間でメッセージを簡単に受け渡すことができます。コンポーネントが破棄されるときは、メモリ リークの問題を避けるために、必ず $off メソッドを使用してイベント リスナーを削除してください。この記事があなたのお役に立てば幸いです、読んでいただきありがとうございます!

以上がVUE3 基本チュートリアル: Vue.js イベント バスの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。