Pelepasan Peristiwa dalam Vue

Seperti yang anda sudah tahu, data bergerak dari komponen induk kepada komponen anak. Sekarang mari kita lihat bagaimana komponen anak boleh berkomunikasi dengan komponen induk. Ini dilakukan dengan menggunakan pelepasan peristiwa. Mari kita lihat secara praktikal.

Katakan dalam komponen induk terdapat beberapa kaedah:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

Mari kita hantar kaedah ini sebagai parameter kepada komponen anak:

App.vue<template>
  <User @show="func" />
</template>

Tetapkan peristiwa yang dilepaskan dalam pengaturan emits:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

Sekarang mari dalam komponen anak buat butang yang akan memproses klik padanya:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

Buat pengendali klik:

components/User.vuemethods: {
  handle() {
    
  }
}

Sekarang mari dalam pengendali klik kita buat fungsi induk dipanggil. Untuk ini, lepaskan peristiwa menggunakan fungsi $emit, dengan parameternya menamakan peristiwa yang dilepaskan:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}