Cara menggunakan pengubah suai acara .berhenti dalam Vue untuk menghentikan acara menggelegak

Peristiwa menggelegak bermakna apabila elemen mencetuskan peristiwa, peristiwa itu akan menggelembung daripada elemen ke nod akar elemen, mencetuskan fungsi pemprosesan peristiwa semua elemen induk yang melepasi. Kadangkala kita perlu mengawal pencetus peristiwa dan hanya mengendalikan peristiwa unsur semasa dan bukan peristiwa unsur induknya. Vue menyediakan pengubah suai acara ".stop" untuk menghentikan acara menggelegak Artikel ini akan memperkenalkan secara terperinci cara menggunakan pengubah suai acara ".stop" dalam Vue untuk menghentikan acara menggelegak.

Dalam Vue, pengubah suai acara ialah arahan yang berakhir dengan ".", yang boleh digunakan untuk mengawal gelagat lalai acara atau melaksanakan pemprosesan acara khas. Struktur pengubah suai acara adalah seperti berikut:

@event.modifier="method"

dengan "event" ialah nama acara, "modifier" ialah pengubah suai acara dan "method " ialah nama fungsi panggil balik. Apabila menggunakan pengubah suai acara ".stop", anda boleh menambahkannya selepas nama acara:

@event.stop="method"

Dengan cara ini, apabila elemen mencetuskan acara, acara itu tidak akan menggelembung ke nod elemen induknya, tetapi berhenti pada nod elemen semasa.

Berikut ialah contoh khusus Katakan kita mempunyai komponen Vue yang mengandungi senarai bersarang ialah butang yang boleh diklik, satu modul perlu dipaparkan maklumat terperinci tentang item tersebut. Pada masa ini kita perlu menggunakan pengubah suai acara ".stop" untuk mengelakkan acara klik daripada menggelegak:

template:`
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">
  <button @click.stop="showModal(item)">Show Details</button>
  <div v-if="item.id===selectedItemId">{{item.details}}</div>
  <ul v-if="item.children.length>0">
    <child-list :items="item.children"></child-list>
  </ul>
</li>

929d1f5ca49e04fdcb27f9465b944689
`,
kaedah:{
showModal(item){

this.selectedItemId=item.id;
// show modal

}
}

Dalam kod di atas, apabila pengguna mengklik butang , kaedah showModal akan dicetuskan dan id item akan dihantar ke kaedah. Pada masa yang sama, pengubah suai acara ".stop" ditambah untuk mengelakkan acara daripada menggelegak, memastikan bahawa hanya peristiwa klik butang semasa dicetuskan dan tidak menggelembung ke elemen induknya.

Secara amnya, sangat mudah untuk menggunakan pengubah suai acara ".stop" dalam Vue untuk menghentikan acara menggelegak Anda hanya perlu menambah ".stop" selepas nama acara. Dengan menguasai mekanisme pengubah suai acara Vue, kami boleh mengawal kelakuan pelbagai acara dengan lebih tepat dan membawa pengalaman pengguna yang lebih baik kepada aplikasi kami.

Atas ialah kandungan terperinci Cara menggunakan pengubah suai acara .berhenti dalam Vue untuk menghentikan acara menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!