Kako emitirati događaje za komunikaciju između Vue komponenti

Strukturiranje vaših web aplikacija korištenjem arhitekture komponenti olakšava izradu i održavanje vaše aplikacije.

Emitiranje prilagođenih događaja jedan je od načina na koji možete upravljati komunikacijom između komponenti; rekviziti i utori su druga dva. Prilagođeni događaji omogućuju slanje podataka od podređene do nadređene komponente.

Emitirajte događaje od djeteta do roditelja

Vue nudi puno opcija za komunikaciju između komponenti. Jedan značajan način za komunikacija između komponenti je preko rekvizita. Rekviziti vam omogućuju slanje podataka od roditelja do podređenih komponenti.

Što se onda događa ako želite poslati podatke od podređene do nadređene komponente? Vue vam omogućuje emitiranje prilagođenih događaja od podređenih do nadređenih komponenti. Ovaj proces omogućuje nadređenoj komponenti korištenje podataka i funkcija iz podređene komponente.

Na primjer, zamislite komponentu gumba s funkcijom koja vraća vrijednost nakon svakog klika. Morat ćete emitirati taj događaj nadređenoj komponenti kako biste omogućili nadređenoj komponenti da ažurira svoje stanje ili izvrši radnju na temelju vraćene vrijednosti.

Konvencija o imenovanju prilagođenih emitiranih događaja u Vueu

Prije nego što se upustite u način emitiranja prilagođenih događaja, morate razumjeti konvenciju imenovanja prilagođenih događaja u Vueu. Prije nego što se pojavio Vue 3, programeri su morali strogo definirati prilagođene događaje kutija za kebab, odvajanje riječi u imenima crticom.

Sada je standardna praksa da definirate svoje prilagođene događaje u kutiji za kebab kada radite s HTML predlošcima, i devina kutija kada radite s JavaScriptom. Međutim, možete odlučiti koristiti bilo koju opciju kada radite s JavaScriptom, jer Vue kompilira sve prilagođene događaje natrag u kebab-case.

Kada emitirate prilagođeni događaj, prenesite svrhu događaja opisnim nazivom. Ovo je vrlo važno, posebno kada radite u timu, kako bi svrha događaja bila jasna.

Kako emitirati prilagođene događaje iz podređene u nadređenu komponentu

Postoje dva načina na koje možete postići emitiranje prilagođenih događaja u Vueu. Možete emitirati prilagođene događaje inline (izravno u Vue predlošku) s $emitirati metoda koju nudi Vue. Također možete koristiti definirajEmisije makro dostupan od Vue 3.

Emitiranje prilagođenih događaja u Vue metodom $emit

$emitirati, ugrađena metoda Vue, omogućuje komponenti dijete da pošalje događaj svojoj nadređenoj komponenti. Ovu metodu pozivate izravno (unutar predloška podređene komponente) da pokrenete prilagođeni događaj. Metoda $emit uzima dva argumenta: naziv događaja koji želite emitirati i izborni korisni teret koji može nositi dodatne podatke.

Razmotrite ovu podređenu komponentu koja emitira događaj kako bi obavijestila nadređenu komponentu o kliku na gumb:

 ChildComponent.vue 
<skriptapostaviti>
import { ref } iz 'vue';
const post = ref('')
skripta>
<šablona>
<div>
<ulaznitip="tekst"v-model="post">
<dugmev-on: klik="$emit('button-clicked', post)">Postdugme>
div>
šablona>

Ovaj blok koda pokazuje kako emitirati prilagođeni događaj iz podređene komponente. Dijete počinje inicijaliziranjem post varijable s praznim nizom.

Dijete komponenta zatim veže ulazni element na post varijablu s v-modelom, a Vue direktiva za povezivanje podataka. Ovo vezanje omogućuje promjene koje napravite u polju za unos za automatsko ažuriranje varijable objave.

Element gumba ima direktivu v-on koja osluškuje događaje klika na gumb. Klik na gumb poziva metodu $emit s dva argumenta: naziv događaja, "button-clicked" i vrijednost varijable post.

Nadređena komponenta sada može slušati prilagođeni događaj s v-on direktivom za rukovanje događajima u Vueu:

 ParentComponent.vue 
import { ref } iz "vue";
import ChildComponent iz "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
skripta>
<šablona>
<div>
<ChildComponent @kliknuti na gumb="dodaj postove"/>
<ul>
<liv-za="post u postList">{{ post }}li>
ul>
div>
šablona>

Ovaj blok koda demonstrira nadređenu komponentu koja uvozi i koristi podređenu komponentu od ranije. Nadređena komponenta definira a postList varijabla polja kao reaktivna referenca. Komponenta tada definira an addPosts funkcija koja se izvodi, uzimajući a objaviti argument. Funkcija dodaje novi post u polje postList s gurnuti() metoda.

The @gumb-kliknut slušatelj događaja bilježi prilagođeni događaj ChildComponent emitira kada kliknete gumb. Ovaj događaj uzrokuje pokretanje funkcije addPosts. Na kraju, blok koda povezuje v-za direktiva za iscrtavanje popisa u Vueu elementu ul za ponavljanje niza postList.

Emitiranje događaja pomoću makronaredbe defineEmits

Vue 3 predstavio je definirajEmisije makro, koji eksplicitno definira događaje koje komponenta može emitirati. Ova makronaredba pruža siguran način za emitiranje događaja koji vode do strukturiranije baze koda.

Evo primjera kako možete koristiti defineEmits makronaredbu i pozvati je u svojoj podređenoj komponenti:

 ChildComponent.vue 
<skriptapostaviti>
import { ref } iz "vue";
const emit = defineEmits(["gumb kliknut"]);
const post = ref("");
const buttonClick = () => {
 emit("kliknut gumb", post.value);
};
skripta>
<šablona>
<div>
<ulaznitip="tekst"v-model="post" />
<dugmev-on: klik="gumbKlik">Postdugme>
div>
šablona>

Iako funkcionalnost ostaje ista, postoje značajne razlike u sintaksi koda između gornjeg bloka koda i onog s $emitirati funkcija.

U ovom bloku koda, definirajEmisije makro definira kliknuti na gumb događaj. Pozivanjem ove makronaredbe, blok koda vraća funkciju $emit, omogućujući vam emitiranje definiranih događaja. Niz proslijeđen makronaredbi defineEmits unutar komponente sadržavat će sve događaje koje trebate emitirati nadređenoj komponenti.

Zatim, blok koda definira a gumb Kliknite funkcija. Ova funkcija emitira događaj klika na gumb i varijablu post nadređenoj komponenti. Blok predloška podređene komponente sadrži element gumba.

Element gumba ima a v-on: klik direktiva koja pokreće funkciju buttonClick. Nadređena komponenta tada može koristiti podređenu komponentu na isti način kao što je to učinila s metodom $emit.

Vue programeri imaju koristi od arhitekture temeljene na komponentama

Možete komunicirati od podređene komponente do njezine nadređene emitiranjem događaja pomoću metode $emit i makronaredbe defineEmits.

Možete imati koristi od Vue-ove arhitekture temeljene na komponentama jer vam omogućuje pisanje strukturiranijeg, konciznijeg koda. S modernim JavaScript okvirima kao što je Vue, možete koristiti web komponente, W3C web standard, za postizanje ove arhitekture temeljene na komponentama.