カスタム イベントを使用して Vue のコンポーネント間の通信を実装する方法

Vue は、多くの便利な機能を提供する人気のフロントエンド フレームワークであり、その 1 つがカスタム イベントです。カスタム イベントは Vue コンポーネント間の通信方法であり、開発者が異なるコンポーネント間でデータとイベントを簡単に共有できるようにします。

Vue は、カスタム イベントを作成する簡単な方法を提供します。Vue インスタンスの $emit() メソッドを使用してカスタム イベントをトリガーし、イベントを受信する必要があるコンポーネントで v-on を使用できます。イベントをリッスンします。以下ではカスタムイベントを使ってVueでコンポーネント間の通信を実装する方法を詳しく紹介します。

1. Vue インスタンスの作成

最初に、アプリケーションのルート インスタンスとして機能する Vue インスタンスを作成する必要があります。この例では、使用するすべての子コンポーネントを登録する必要があります。

// main.js
import Vue from 'vue'
import App from './App.vue'
import ChildComponent from './components/ChildComponent.vue'

Vue.component('child-component', ChildComponent)

new Vue({
  el: '#app',
  render: h => h(App)
})

この例では、「child-component」という名前のカスタム コンポーネントを登録しました。

2. カスタム イベントをトリガーする

次に、コンポーネントでカスタム イベントをトリガーする必要があります。 Vue インスタンスの $emit() メソッドを使用して、このタスクを実行できます。 $emit() メソッドは、指定されたカスタム イベントをトリガーし、任意のパラメーターを渡します。

たとえば、フォームが送信された後にカスタム イベントをトリガーし、それを「submitted」という変数に保存します。

// ChildComponent.vue
<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 表单输入 -->
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
export default {
  methods: {
    submitForm() {
      // 保存表单数据
      // ...
      this.$emit('submitted', formData)
    }
  }
}
</script>

この例では、次のように使用します。 v -on ディレクティブは listen します。 「submit」イベントに追加し、submitForm() メソッドの $this.$emit() メソッドを通じて「submitted」という名前のカスタム イベントをトリガーし、フォーム データを渡します。

3. カスタム イベントのリッスン

次に、別のコンポーネントでトリガーしたカスタム イベントをリッスンする必要があります。このタスクを実行するには、Vue インスタンスで v-on ディレクティブを使用してイベントをリッスンします。

たとえば、別のコンポーネントで送信されたばかりのフォーム データを表示したい場合があります:

// AnotherComponent.vue
<template>
  <div>
    Submitted form data: {{ submittedData }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      submittedData: null
    }
  },
  mounted() {
    this.$on('submitted', data => {
      this.submittedData = data
    })
  }
}
</script>

この例では、mounted() ライフ サイクル フック関数で $this を使用します。 () メソッドを使用して、「submitted」という名前のカスタム イベントをリッスンします。イベントが発生すると、渡されたデータをコンポーネントの data プロパティに保存します。

4. カスタム イベントの配信

Vue では、カスタム イベントをコンポーネント階層で配信できます。つまり、コンポーネントは $emit() メソッドを渡すことができます。が発生すると、イベントは親コンポーネントによってキャッチされるか、Vue インスタンスに到達するまで、コンポーネント階層を上に渡されます。

親コンポーネントでカスタム イベントをリッスンする場合、子コンポーネントでイベントを明示的に定義しなくても、子コンポーネントから直接イベントをトリガーできます。

たとえば、親コンポーネントでイベント ハンドラーを定義し、それを子コンポーネントに渡すことができます。

// ParentComponent.vue
<template>
  <div>
    <child-component @submitted="handleSubmittedData" />
  </div>
</template>
<script>
export default {
  methods: {
    handleSubmittedData(data) {
      // 处理表单数据
      // ...
    }
  }
}
</script>

この例では、親コンポーネントで「handleSubmittedData」という名前のイベント ハンドラーを定義します。 " メソッドを作成し、それを "child-component" という名前の子コンポーネントに渡します。子コンポーネントが「submitted」と呼ばれるカスタム イベントを起動すると、イベントは親コンポーネントによって捕捉されるまでコンポーネント階層を上に渡されます。

概要

Vue では、カスタム イベントはコンポーネント間の通信を簡単に実装する方法です。 Vue インスタンスで $emit() メソッドを使用してカスタム イベントをトリガーし、イベントをリッスンするためにイベントを受信する必要があるコンポーネントで v-on ディレクティブを使用できます。さらに、カスタム イベントをコンポーネント階層に渡すことができるため、親コンポーネントが子コンポーネントからのイベントをリッスンし、イベントを直接処理できるようになります。

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