$listeners を使用して Vue でイベント処理関数を渡す

Vue では、多くの場合、ネストされたコンポーネントがいくつかあり、これらのネストされたコンポーネント間でイベントを渡す必要があります。 Vue では、$emit イベントはコンポーネント間のイベント通信に使用されます。

ただし、場合によっては、親コンポーネントのイベント処理関数をネストされた子コンポーネントに渡す必要があるため、現時点では $emit イベントの使用は適切ではありません。このとき、Vue が提供する $listeners を使用してイベント処理関数を渡すことができます。

それでは、$listener とは何でしょうか? $listeners は Vue インスタンス オブジェクトの特別なプロパティで、コンポーネントに作用するすべてのリスナー/イベント ハンドラーが含まれます。

$listeners 属性を通じて、親コンポーネントで定義されたイベント処理関数を、ネストされた子コンポーネントに渡して使用できます。

1. 親コンポーネントで定義されたイベント処理関数:

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <child @childClick="$listeners.childClick"></child>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log('parent click')
      }
    }
  }
</script>

2. 子コンポーネントは、親コンポーネントによって渡されたイベント処理関数を受け取ります:

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('childClick')
      }
    }
  }
</script>

このようにして、親で定義されたイベント処理関数コンポーネントを渡すことができます。 子コンポーネントで使用されます。

親コンポーネントで渡されるイベント処理関数は、v-on で属性バインドする必要があることに注意してください。同時に、イベント名をイベントと同じにすることはできないことに注意してください。子コンポーネントによって定義された名前を使用しないと、競合が発生します。

さらに、$listeners プロパティには、現在のコンポーネントに渡されるイベント リスナーのみが含まれ、親コンポーネント内の他の子コンポーネントに渡されるリスナーは含まれません。したがって、子コンポーネントにバインドされたイベント ハンドラーは、親コンポーネント内の他の子コンポーネントに適切に伝播する必要があることに注意することが重要です。

つまり、Vue で $listeners を使用すると、イベント処理関数を渡すための便利で効果的な方法となり、コンポーネント間でイベントをより柔軟に通信できるようになります。

以上が$listeners を使用して Vue でイベント処理関数を渡すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。