Cara menggunakan acara tersuai untuk melaksanakan komunikasi antara komponen dalam Vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri mudah, salah satunya ialah acara tersuai. Acara tersuai ialah cara berkomunikasi antara komponen Vue, membolehkan pembangun berkongsi data dan acara dengan mudah antara komponen yang berbeza.

Vue menyediakan cara mudah untuk mencipta acara tersuai Kita boleh menggunakan kaedah $emit() dalam contoh Vue untuk mencetuskan acara tersuai dan menggunakan v-on dalam komponen yang perlu menerima arahan untuk mendengar acara. Di bawah saya akan memperkenalkan secara terperinci cara menggunakan acara tersuai untuk melaksanakan komunikasi antara komponen dalam Vue.

1. Buat tika Vue

Mula-mula kita perlu mencipta tika Vue, yang akan berfungsi sebagai tika akar aplikasi kita. Dalam keadaan ini, kita perlu mendaftarkan semua komponen kanak-kanak yang akan kita gunakan.

// main.js
import Vue from 'vue'
import App from './App.vue'
import ChildComponent from './components/ChildComponent.vue'

Vue.component('child-component', ChildComponent)

new Vue({
  el: '#app',
  render: h => h(App)
})

Dalam contoh ini, kami mendaftarkan komponen tersuai bernama "komponen kanak-kanak".

2. Cetuskan acara tersuai

Seterusnya, dalam komponen, kita perlu mencetuskan acara tersuai. Kita boleh menggunakan kaedah $emit() dalam contoh Vue untuk menyelesaikan tugas ini. Kaedah $emit() akan mencetuskan peristiwa tersuai yang ditentukan dan lulus parameter arbitrari.

Sebagai contoh, kami mungkin mencetuskan acara tersuai selepas borang diserahkan, menyimpannya dalam pembolehubah yang dipanggil "diserahkan":

// ChildComponent.vue
<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 表单输入 -->
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
export default {
  methods: {
    submitForm() {
      // 保存表单数据
      // ...
      this.$emit('submitted', formData)
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan v The -on directive listens kepada acara "serahkan", mencetuskan acara tersuai bernama "diserahkan" melalui kaedah $this.$emit() dalam kaedah submitForm() dan menghantar data borang.

3. Mendengar acara tersuai

Sekarang, kita perlu mendengar acara tersuai yang baru kita cetuskan dalam komponen lain. Untuk melaksanakan tugas ini, kita boleh menggunakan arahan v-on dalam contoh Vue untuk mendengar acara tersebut.

Sebagai contoh, kami mungkin mahu memaparkan data borang yang baru kami serahkan dalam komponen lain:

// AnotherComponent.vue
<template>
  <div>
    Submitted form data: {{ submittedData }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      submittedData: null
    }
  },
  mounted() {
    this.$on('submitted', data => {
      this.submittedData = data
    })
  }
}
</script>

Dalam contoh ini, kami menggunakan $this dalam fungsi cangkuk kitaran hayat mounted(). () kaedah untuk mendengar acara tersuai bernama "diserahkan". Apabila acara dicetuskan, kami menyimpan data yang diluluskan dalam sifat data komponen.

4. Penghantaran acara tersuai

Dalam Vue, acara tersuai boleh diluluskan dalam hierarki komponen, yang bermaksud bahawa komponen boleh melepasi kaedah $emit() Suatu peristiwa dipecat, dan peristiwa itu diserahkan kepada hierarki komponen sehingga ia ditangkap oleh komponen induk atau sehingga ia mencapai contoh Vue.

Jika kita mendengar peristiwa tersuai dalam komponen induk, maka kita boleh mencetuskan acara itu terus daripada komponen anak tanpa mentakrifkan peristiwa dalam komponen anak secara eksplisit.

Sebagai contoh, kita boleh mentakrifkan pengendali peristiwa dalam komponen induk dan menyerahkannya kepada komponen anak:

// ParentComponent.vue
<template>
  <div>
    <child-component @submitted="handleSubmittedData" />
  </div>
</template>
<script>
export default {
  methods: {
    handleSubmittedData(data) {
      // 处理表单数据
      // ...
    }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan pengendali acara dalam komponen induk yang dipanggil "handleSubmittedData " kaedah dan hantarkannya kepada komponen kanak-kanak bernama "komponen kanak-kanak". Apabila komponen kanak-kanak menyalakan acara tersuai yang dipanggil "diserahkan", peristiwa itu diserahkan kepada hierarki komponen sehingga ia ditangkap oleh komponen induk.

Ringkasan

Dalam Vue, acara tersuai ialah cara mudah untuk berkomunikasi antara komponen. Kita boleh menggunakan kaedah $emit() dalam contoh Vue untuk mencetuskan peristiwa tersuai, dan menggunakan arahan v-on dalam komponen yang perlu menerima acara untuk mendengar acara tersebut. Selain itu, peristiwa tersuai boleh diserahkan kepada hierarki komponen, membenarkan komponen induk mendengar acara daripada komponen anak dan mengendalikan acara secara langsung.

Atas ialah kandungan terperinci Cara menggunakan acara tersuai untuk melaksanakan komunikasi antara komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!