Vue melaksanakan gelagat menggelegak acara pembatalan

Dalam Vue, acara menggelegak ialah gelagat yang sangat biasa, tetapi kadangkala kita perlu membatalkan gelagat acara menggelegak. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan gelagat menggelegak acara pembatalan.

Peristiwa menggelegak

Peristiwa menggelegak ialah apabila elemen mencetuskan acara tertentu, acara itu akan menggelegak lapisan demi lapisan sehingga ia ditangkap oleh elemen induk. Sebagai contoh, apabila kita mengklik tetikus pada butang, peristiwa klik butang akan dicetuskan, dan kemudian peristiwa klik unsur induknya juga akan dicetuskan, diikuti dengan peristiwa klik unsur atas sehingga peristiwa klik pada objek Dokumen dicetuskan sehingga dicetuskan atau acara dibatalkan.

Kami boleh menggunakan perwakilan acara untuk memintas acara dan menghalangnya daripada menggelegak kepada elemen induk.

Batalkan acara menggelegak

Kadangkala, kita perlu membatalkan gelagat menggelegak sesuatu acara supaya ia tidak dihantar ke elemen atas. Dalam Vue, kita boleh mencapai ini melalui pengubahsuai acara.

Dalam Vue, pengubah suai acara ialah teg khas yang diakhiri dengan nama acara, yang boleh mengubah gelagat acara. Antaranya, pengubah suai .stop boleh menghentikan acara menggelegak supaya acara tidak lagi dihantar ke elemen atas.

Kod sampel:

<div @click.stop="divClickHandler">
  <button @click="btnClickHandler">Button</button>
</div>

Dalam contoh ini, peristiwa klik butang akan dicetuskan apabila butang diklik Walau bagaimanapun, dalam Vue, acara akan menggelembung ke lapisan elemen atas mengikut lapisan. Walau bagaimanapun, memandangkan kami menambahkan pengubah suai .stop pada elemen div yang mengandungi butang, hanya peristiwa klik butang akan dicetuskan apabila butang diklik, bukannya menggelegak.

Selain pengubah .stop, terdapat pengubahsuai acara lain yang boleh digunakan. Contohnya, pengubah suai .prevent boleh menghalang gelagat lalai acara dan pengubah suai .capture boleh menyebabkan peristiwa itu ditangkap daripada elemen atas dan bukannya menggelegak daripada elemen bawah.

Ringkasan

Dalam Vue, sangat mudah untuk membatalkan gelagat menggelegak acara melalui pengubah suai acara. Pengubah suai .stop boleh menghentikan acara menggelegak dan pengubah suai lain juga boleh mencapai kawalan acara yang lebih fleksibel. Apabila kita perlu mengawal acara menggelegak dalam Vue, kita boleh menggunakan kaedah di atas untuk mencapainya.

Atas ialah kandungan terperinci Vue melaksanakan gelagat menggelegak acara pembatalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!