Vue コンポーネント通信: カスタム イベント通信に $emit と $on を使用する

Vue コンポーネント通信: カスタム イベント通信に $emit と $on を使用する

Vue アプリケーションでは、コンポーネント通信は非常に重要な部分です。コンポーネント通信を通じて、異なるコンポーネント間でデータを渡したり、イベントをトリガーしたりできます。 Vue フレームワークは、コンポーネント間で通信するためのさまざまな方法を提供します。一般的な方法の 1 つは、カスタム イベント通信に $emit と $on を使用することです。

Vue では、各コンポーネントは $emit メソッドを通じてカスタム イベントをトリガーし、他のコンポーネントにデータを渡すことができます。他のコンポーネントは $on を通じてこのカスタム イベントをリッスンし、イベントがトリガーされたときに対応するロジックを実行できます。

2 つのコンポーネントがあると仮定して、簡単な例を見てみましょう。1 つは親コンポーネント Parent、もう 1 つは子コンポーネント Child です。子コンポーネントのボタンがクリックされたときに、親コンポーネントに対応する処理が実行されるように通知されることを期待します。

まず、サブコンポーネントでボタンを定義し、ボタンがクリックされたときにカスタム イベントをトリガーする必要があります。

<template>
  <button @click="sendData">点击我触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', { data: 'hello' });
    }
  }
};
</script>

上記のコードでは、サブコンポーネントはボタンを定義し、クリック時にボタンのイベントでは、「customEvent」という名前のカスタム イベントが this.$emit を通じてトリガーされ、データ { data: 'hello' } を含むオブジェクトが渡されます。

次に、親コンポーネントで、このカスタム イベントをリッスンし、イベントがトリガーされたときに対応するロジックを実行する必要があります。このカスタム イベントをリッスンするために作成された親コンポーネントのライフ サイクル フック関数で this.$on を使用できます。

<template>
  <div>
    <p>{{ message }}</p>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
};
</script>

上記のコードでは、親コンポーネントは最初に子コンポーネント ChildComponent を導入し、それをテンプレートで使用します。 タグを使用して子コンポーネントを参照します。次に、作成したライフサイクルフック関数で、this.$on を通じてサブコンポーネントによってトリガーされる「customEvent」イベントをリッスンし、イベントがトリガーされたときに実行されるコールバック関数を handleCustomEvent として指定します。 handleCustomEvent では、サブコンポーネントから渡されたデータを取得し、それに応じて処理できます。

これで、子コンポーネントと親コンポーネント間の通信が完了しました。子コンポーネントのボタンがクリックされると、「customEvent」カスタム イベントがトリガーされ、データが this.$emit を通じて親コンポーネントに渡されます。親コンポーネントがデータを受信すると、データはメッセージ変数に保存され、テンプレートに表示されます。

this.$on を使用してカスタム イベントをリッスンすることに加えて、this.$once を使用してカスタム イベントをリッスンすることもできます。これにより、イベントが 1 回トリガーされた後、監視が自動的に削除されます。さらに、Vue はリスナーを手動で削除するための this.$off メソッドも提供します。

概要:
$emit および $on を介したカスタム イベント通信は、Vue の一般的なコンポーネント通信方法です。カスタム イベントをトリガーし、送信コンポーネントの this.$emit を通じてデータを渡し、受信コンポーネントの this.$on を通じてカスタム イベントをリッスンし、イベントがトリガーされたときに対応するロジックを実行できます。このアプローチは、コンポーネント間の柔軟な通信を実現し、コードの再利用性と保守性を向上させるのに役立ちます。

上記は、カスタム イベント通信に $emit と $on を使用するためのサンプル コードと手順です。 Vue コンポーネントの通信をよりよく理解し、適用するのに役立つことを願っています。

以上がVue コンポーネント通信: カスタム イベント通信に $emit と $on を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。