Komunikasi komponen Vue: menggunakan $emit dan $on untuk komunikasi acara tersuai

Komunikasi komponen Vue: Gunakan $emit dan $on untuk komunikasi acara tersuai

Dalam aplikasi Vue, komunikasi komponen ialah bahagian yang sangat penting. Melalui komunikasi komponen, kita boleh menghantar data, mencetuskan peristiwa, dsb. antara komponen yang berbeza. Rangka kerja Vue menyediakan pelbagai cara untuk berkomunikasi antara komponen Salah satu cara biasa ialah menggunakan $emit dan $on untuk komunikasi acara tersuai.

Dalam Vue, setiap komponen boleh mencetuskan peristiwa tersuai melalui kaedah $emit dan menghantar data kepada komponen lain. Komponen lain boleh mendengar peristiwa tersuai ini melalui $on dan melaksanakan logik yang sepadan apabila peristiwa itu dicetuskan.

Mari kita lihat contoh mudah, dengan mengandaikan kita mempunyai dua komponen: satu ialah komponen induk Ibu Bapa, dan satu lagi komponen anak Kanak-kanak. Kami berharap apabila butang komponen anak diklik, komponen induk akan dimaklumkan untuk melakukan pemprosesan yang sepadan.

Mula-mula, kita perlu menentukan butang dalam subkomponen dan mencetuskan acara tersuai apabila butang itu diklik:

<template>
  <button @click="sendData">点击我触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', { data: 'hello' });
    }
  }
};
</script>

Dalam kod di atas, subkomponen mentakrifkan butang dan meneruskannya dalam acara klik pada butang itu untuk mencetuskan acara tersuai bernama 'customEvent' dan menghantar objek yang mengandungi data { data: 'hello' }.

Kemudian, dalam komponen induk, kita perlu mendengar acara tersuai ini dan melaksanakan logik yang sepadan apabila peristiwa itu dicetuskan. Kita boleh menggunakan ini.$on dalam fungsi cangkuk kitaran hayat komponen induk yang dicipta untuk mendengar acara tersuai ini:

<template>
  <div>
    <p>{{ message }}</p>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
};
</script>

Dalam kod di atas, komponen induk mula-mula memperkenalkan komponen anak ChildComponent dan menggunakan

Kini, kami telah menyelesaikan komunikasi antara komponen anak dan komponen induk. Apabila butang komponen anak diklik, acara tersuai 'customEvent' dicetuskan dan data dihantar kepada komponen induk melalui ini.$emit. Selepas komponen induk menerima data, ia akan disimpan dalam pembolehubah mesej dan dipaparkan dalam templat.

Selain menggunakan ini.$on untuk mendengar acara tersuai, kami juga boleh menggunakan ini.$sekali untuk mendengar acara tersuai, supaya selepas acara dicetuskan sekali, pemantauan akan dialih keluar secara automatik. Selain itu, Vue juga menyediakan kaedah ini.$off untuk mengalih keluar pendengar secara manual.

Ringkasan:
Komunikasi acara tersuai melalui $emit dan $on ialah kaedah komunikasi komponen biasa dalam Vue. Kita boleh mencetuskan peristiwa tersuai dan menghantar data melalui ini.$emit dalam komponen penghantaran, dan kemudian mendengar acara tersuai melalui ini.$on dalam komponen penerima dan laksanakan logik yang sepadan apabila peristiwa itu dicetuskan. Pendekatan ini boleh membantu kami mencapai komunikasi yang fleksibel antara komponen dan meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod.

Di atas ialah kod sampel dan arahan untuk menggunakan $emit dan $on untuk komunikasi acara tersuai. Saya harap ia dapat membantu anda memahami dan menggunakan komunikasi komponen Vue dengan lebih baik.

Atas ialah kandungan terperinci Komunikasi komponen Vue: menggunakan $emit dan $on untuk komunikasi acara tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!