Cara menggunakan $emit untuk mencetuskan acara dalam Vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang membolehkan anda membuat aplikasi web interaktif dan responsif. Terdapat ciri yang sangat berkuasa dalam Vue.js yang dipanggil $emit. Menggunakan ciri ini, anda boleh mencetuskan peristiwa dalam komponen anak dan mengendalikannya dalam komponen induk. Dalam artikel ini, kami akan memperkenalkan cara menggunakan $emit untuk mencetuskan acara dalam Vue.js.

$emit dalam Vue.js

Dalam Vue.js, semua komponen boleh berfungsi sebagai penghantar dan penerima acara. Apabila komponen ingin mencetuskan peristiwa, ia boleh menggunakan fungsi $emit. Sintaks fungsi $emit adalah seperti berikut:

this.$emit(eventName, payload)

Fungsi ini mempunyai dua parameter. eventName ialah jenis rentetan, yang menunjukkan nama muatan adalah parameter pilihan dan boleh menjadi sebarang jenis data. Apabila komponen memanggil fungsi ini, Vue.js menghantar acara kepada komponen induknya. Dalam komponen induk, anda boleh menggunakan arahan v-on untuk mendengar acara ini.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan $emit dalam Vue.js:

<!--Child Component-->
<template>
  <button @click="triggerEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('my-event', 'Hello from child component!')
    }
  }
}
</script>

<!--Parent Component-->
<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    handleEvent(payload) {
      this.message = payload
    }
  }
}
</script>

Dalam contoh ini kami mentakrifkan komponen yang dipanggil ChildComponent yang mempunyai butang. Apabila butang diklik, komponen kanak-kanak mencetuskan acara tersuai my-event dengan memanggil fungsi $emit dan menghantar 'Hello dari komponen kanak-kanak sebagai muatan kepada komponen induk.'

Dalam komponen induk, kami menggunakan arahan v-on untuk mendengar acara tersuai my-event dan mengendalikan acara dalam kaedah handleEvent. Dalam kaedah ini, kami menetapkan muatan acara kepada atribut data mesej. Kami kemudiannya memaparkan mesej dalam templat melalui ungkapan interpolasi.

Ringkasan

Fungsi $emit dalam Vue.js membolehkan anda mencetuskan peristiwa tersuai dalam komponen anak dan mengendalikan acara dalam komponen induk. Anda boleh menggunakan fungsi $emit untuk menghantar sebarang jenis data. Dalam komponen induk, gunakan arahan v-on untuk mendengar acara tersuai.

Mudah-mudahan, melalui artikel ini, anda telah mempelajari asas penggunaan $emit untuk mencetuskan peristiwa dalam Vue.js.

Atas ialah kandungan terperinci Cara menggunakan $emit untuk mencetuskan acara dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!