Menggunakan $listeners untuk lulus fungsi pengendalian acara dalam Vue

Dalam Vue, selalunya terdapat beberapa komponen bersarang dan peristiwa perlu dihantar antara komponen bersarang ini. Dalam Vue, acara $emit digunakan untuk komunikasi acara antara komponen.

Walau bagaimanapun, dalam beberapa kes, kita perlu menghantar pengendali acara komponen induk kepada komponen anak bersarang Dalam kes ini, menggunakan acara $emit adalah tidak sesuai. Pada masa ini, anda boleh menggunakan $listeners yang disediakan oleh Vue untuk lulus fungsi pemprosesan acara.

Jadi, apakah itu $pendengar? $listeners ialah harta khas dalam objek contoh Vue, yang mengandungi semua pendengar/pengendali acara yang bertindak pada komponen tersebut.

Melalui atribut $listeners, kita boleh menghantar fungsi pengendali peristiwa yang ditakrifkan dalam komponen induk kepada komponen anak bersarang untuk digunakan:

1. Fungsi pengendali peristiwa yang ditakrifkan dalam komponen induk :

<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. Komponen anak menerima fungsi pengendalian acara yang diluluskan oleh komponen induk:

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

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

Dengan cara ini, fungsi pengendalian acara yang ditakrifkan dalam induk komponen boleh diluluskan Digunakan dalam komponen kanak-kanak.

Perlu diambil perhatian bahawa fungsi pengendalian acara yang diluluskan dalam komponen induk perlu diikat dengan atribut v-on Pada masa yang sama, perlu diingatkan bahawa nama acara tidak boleh sama dengan acara nama yang ditakrifkan oleh komponen kanak-kanak, jika tidak konflik akan berlaku.

Selain itu, sifat $listeners hanya mengandungi pendengar acara yang dihantar kepada komponen semasa dan tidak termasuk pendengar yang dihantar kepada komponen anak lain dalam komponen induk. Oleh itu, adalah penting untuk ambil perhatian bahawa pengendali peristiwa yang terikat dalam komponen anak perlu disebarkan dengan betul kepada komponen anak lain dalam komponen induk.

Ringkasnya, menggunakan $listeners dalam Vue ialah cara yang mudah dan berkesan untuk lulus fungsi pengendalian acara, yang membolehkan kami menyampaikan acara dengan lebih fleksibel antara komponen.

Atas ialah kandungan terperinci Menggunakan $listeners untuk lulus fungsi pengendalian acara dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!