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

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

Vue では、コンポーネントは独立しており、各コンポーネントは独自のライフサイクルとデータを持っています。しかし、実際の開発プロセスではコンポーネント間の通信は避けられません。 Vue は、コンポーネント通信の非常に柔軟かつ効率的な方法、つまりカスタム イベント リスニングを提供します。

Vue のカスタム イベント リスニング メカニズムは、パブリッシュ/サブスクライブ モデルに基づいて実装されています。 Vue インスタンスの $on メソッドを使用して 1 つのコンポーネントでカスタム イベントをリッスンし、$emit メソッドを通じて他のコンポーネントでイベントをトリガーできます。以下では、$on を使用してカスタム イベントを監視する方法を詳しく紹介します。

まず、単純な親子コンポーネントの例を作成しましょう。親コンポーネントは App.vue、子コンポーネントは Child.vue です。

App.vue:

<template>
  <div>
    <h2>App Component</h2>
    <button @click="notifyChild">通知子组件</button>
    <Child></Child>
  </div>
</template>

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

  export default {
    name: 'App',
    components: {
      Child
    },
    methods: {
      notifyChild() {
        this.$emit('customEvent', 'Hello Child Component!');
      }
    }
  }
</script>

Child.vue:

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$parent.$on('customEvent', this.handleCustomEvent);
    },
    beforeDestroy() {
      this.$parent.$off('customEvent', this.handleCustomEvent);
    },
    methods: {
      handleCustomEvent(message) {
        this.message = message;
      }
    }
  }
</script>

親コンポーネント App.vue で、ボタン customEvent# をクリックしてカスタム イベントをトリガーします。 ## し、子コンポーネントにメッセージを渡します。

子コンポーネント Child.vue では、マウントされたライフサイクル フック関数の

this.$parent.$on メソッドを使用して、親コンポーネントのカスタム イベントをリッスンしますカスタムイベント。そして、beforeDestroy ライフサイクル フック関数の this.$parent.$off メソッドを使用して、リスニングをキャンセルします。メソッド handleCustomEvent では、親コンポーネントから渡されたメッセージを子コンポーネントのメッセージに割り当てます。

上記のコード例を通じて、親コンポーネントと子コンポーネント間の通信を実現しました。親コンポーネントのボタンがクリックされると、子コンポーネントは親コンポーネントから渡されたメッセージを受信して​​表示します。

親コンポーネントと子コンポーネント間の通信に加えて、任意の 2 つのコンポーネント間の通信も確立できます。コンポーネントの 1 つで

this.$on を使用してカスタム イベントをリッスンし、次に this.$emit を使用して他のコンポーネントでイベントをトリガーするだけです。

要約すると、カスタム イベント監視用の Vue の $on メソッドを通じて、柔軟で効率的なコンポーネント通信を実現できます。親コンポーネントと子コンポーネント間の通信でも、任意の 2 つのコンポーネント間の通信でも、簡単に処理できます。この記事が Vue 開発におけるコンポーネント通信の問題の解決に役立つことを願っています。

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