Tutorial asas VUE3: Acara tersuai menggunakan Vue.js

Vue.js ialah rangka kerja JavaScript popular yang menyediakan banyak ciri mudah, jadi ia sangat berguna apabila membangunkan aplikasi web. Sistem acara tersuai dalam Vue.js menjadikannya lebih fleksibel dan membolehkan kebolehgunaan semula kod yang lebih baik melalui penembakan dan pengendalian acara komponen. Dalam artikel ini, kami akan membincangkan cara menggunakan acara tersuai dengan Vue.js.

Asas acara tersuai dalam Vue.js

Dalam Vue.js, kita boleh mendengar acara DOM melalui arahan v-on. Sebagai contoh, kita boleh mempunyai kod berikut untuk mendengar peristiwa klik butang:

<button v-on:click="onClick">Click me!</button>

"onClick" ialah kaedah komponen, yang akan dipanggil apabila butang diklik. Di sini "onClick" ialah kunci kaedah $emit. Kaedah $emit ialah kaedah dalam Vue.js yang boleh mencetuskan acara tersuai. Apabila menggunakan kaedah $emit, parameter pertamanya menentukan nama acara tersuai dan parameter lain dihantar kepada pendengar.

Berikut ialah contoh penggunaan kaedah $emit untuk mencetuskan acara tersuai:

// 子组件.vue
<div>
  <button v-on:click="$emit('custom-event', 'some data')">Click me!</button>
</div>

// 父组件.vue
<child-component v-on:custom-event="handleCustomEvent"></child-component>

methods: {
  handleCustomEvent (data) {
    console.log(data) // logs "some data"
  }
}

Dalam komponen anak, kami menggunakan butang untuk mencetuskan acara tersuai, dengan parameter pertama ialah " custom-event", dan parameter kedua ialah data yang dihantar kepada pendengar. Dalam komponen induk, kami menggunakan arahan v-on untuk mendengar acara "acara tersuai" dan mengikatnya pada fungsi handleCustomEvent, yang akan dipanggil apabila acara itu dicetuskan. handleCustomEvent menerima parameter data yang dihantar kepadanya dan mencetak data tersebut dalam konsol.

Gunakan acara tersuai untuk melengkapkan komunikasi antara komponen

Sistem acara tersuai Vue.js boleh digunakan untuk menghantar data antara komponen. Berikut ialah contoh menggunakan acara tersuai untuk mencapai komunikasi antara komponen:

// 子组件A.vue
<template>
  <div>
    <button v-on:click="$emit('update-counter', counter)">Increase counter</button>
  </div>
</template>

<script>
export default {
  data () {
    return { counter: 0 }
  }
}
</script>

// 子组件B.vue
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <child-component-a v-on:update-counter="updateCounter"></child-component-a>
  </div>
</template>

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

export default {
  components: { ChildComponentA },
  data () {
    return { counter: 0 }
  },
  methods: {
    updateCounter (counter) {
      this.counter = counter
    }
  }
}
</script>

Dalam contoh ini, kami mempunyai dua komponen: ChildComponentA dan ChildComponentB. ChildComponentA ialah komponen butang yang meningkatkan pembilang Apabila butang diklik, ia mencetuskan pembilang kemas kini acara tersuai melalui kaedah $emit dan menghantar nilai pembilang semasa kepada komponen induk sebagai parameter.

ChildComponentB ialah komponen kaunter, di mana kami menggunakan ChildComponentA, mendengar acara tersuai kaunter kemas kini dan mengikatnya dengan kaedah updateCounter. Kaedah updateCounter menetapkan nilai pembilang yang diluluskan kepada pembilang pembolehubah keadaan komponen, jadi kami boleh memaparkan nilai semasa dalam komponen.

Ringkasan

Acara tersuai Vue.js ialah ciri berkuasa yang membolehkan komunikasi yang cekap antara komponen. Selain mencetuskan peristiwa dalam komponen, Vue.js juga menyokong peristiwa pencetus secara global Anda boleh menggunakan kaedah $emit dalam setiap contoh Vue.js, bukan hanya dalam komponen.

Apabila menggunakan acara tersuai, kita harus mengikut amalan terbaik Vue.js, iaitu untuk mengelakkan kekeliruan dengan acara DOM bahasa itu sendiri dan menggunakannya untuk komunikasi langsung komponen. Apabila melaksanakan komunikasi antara komponen, sebaiknya jangan berkongsi pembolehubah keadaan antara komponen dan sebaliknya menggunakan peristiwa tersuai untuk menghantar data.

Atas ialah kandungan terperinci Tutorial asas VUE3: Acara tersuai menggunakan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!