Cum să emiti evenimente pentru a comunica între componentele Vue

Structurarea aplicațiilor dvs. web utilizând o arhitectură componente facilitează construirea și întreținerea aplicației dvs.

Emiterea de evenimente personalizate este o modalitate prin care puteți gestiona comunicarea între componente; recuzita și sloturile sunt alte două. Evenimentele personalizate vă permit să trimiteți date de la copil către componenta părinte.

Emite evenimente de la un copil către părintele său

Vue oferă o mulțime de opțiuni de comunicare între componente. Un mod semnificativ de comunicarea între componente se face prin recuzită. Recuzitele vă permit să trimiteți date de la componentele părinte la componentele secundare.

Ce se întâmplă atunci dacă doriți să trimiteți date de la copil către componenta părinte? Vue vă permite să emiteți evenimente personalizate de la componentele copil la componentele părinte. Acest proces permite componentei părinte să utilizeze date și funcții din componenta fii.

De exemplu, imaginați-vă o componentă de buton cu o funcție care returnează o valoare la fiecare clic. Va trebui să emiti acel eveniment către componenta părinte pentru a permite componentei părinte să-și actualizeze starea sau să efectueze o acțiune bazată pe valoarea returnată.

Convenția de denumire pentru evenimentele personalizate emise în Vue

Înainte de a explora cum să emiti evenimente personalizate, trebuie să înțelegeți convenția de denumire a evenimentelor personalizate în Vue. Înainte de apariția Vue 3, dezvoltatorii trebuiau să definească strict evenimente personalizate cu kebab-case, separând cuvintele în nume cu un caracter cratimă.

Acum este o practică standard să definiți evenimentele personalizate în kebab-case atunci când lucrați cu șabloane HTML și camelCase atunci când lucrați cu JavaScript. Cu toate acestea, puteți alege să utilizați orice opțiune atunci când lucrați cu JavaScript, deoarece Vue compilează toate evenimentele personalizate înapoi la kebab-case.

Când emiteți un eveniment personalizat, transmiteți scopul evenimentului cu un nume descriptiv. Acest lucru este foarte important, mai ales atunci când lucrați în echipă, pentru a clarifica scopul evenimentului.

Cum să emiti evenimente personalizate de la componenta copil la părinte

Există două moduri în care puteți realiza emiterea de evenimente personalizate în Vue. Puteți emite evenimente personalizate în linie (direct în șablonul Vue) cu $emite metoda oferită de Vue. De asemenea, puteți utiliza defineEmits macro disponibilă de la Vue 3.

Emiterea de evenimente personalizate în Vue cu metoda $emit

$emite, o metodă Vue încorporată, permite unei componente secundare să trimită un eveniment către componenta părinte. Apelați această metodă în linie (în cadrul șablonului componentei secundare) pentru a declanșa evenimentul personalizat. Metoda $emit are două argumente: numele evenimentului pe care doriți să-l emiteți și o sarcină utilă opțională care poate transporta date suplimentare.

Luați în considerare această componentă copil care emite un eveniment pentru a notifica componenta părinte despre un clic pe buton:

 ChildComponent.vue 
<scenariuînființat>
import { ref } din 'vue';
const post = ref('')
scenariu>
<șablon>
<div>
<intraretip="text"v-model="post">
<butonv-on: faceți clic="$emit('a făcut clic pe buton', post)">Postbuton>
div>
șablon>

Acest bloc de cod arată cum să emită un eveniment personalizat dintr-o componentă copil. Copilul începe prin a inițializa o variabilă post cu un șir gol.

Componenta copil leagă apoi elementul de intrare la variabila post cu v-model, a Directiva privind legarea datelor Vue. Această legare permite modificărilor pe care le faceți în câmpul de intrare pentru a actualiza automat variabila post.

Elementul butonul are o directivă v-on care ascultă evenimentele de clic pe buton. Click-ul butonului apelează metoda $emit cu două argumente: numele evenimentului, „button-clicked” și valoarea variabilei post.

Componenta părinte poate asculta acum evenimentul personalizat cu directiva v-on pentru gestionarea evenimentelor în Vue:

 ParentComponent.vue 
import { ref } din "vue";
import ChildComponent din „./components/ChildComponent.vue”;
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (postare)
}
scenariu>
<șablon>
<div>
<ChildComponent @apăsat butonul=„adăugați postări”/>
<ul>
<liv-pentru="postează în postList">{{ post }}li>
ul>
div>
șablon>

Acest bloc de cod demonstrează o componentă părinte care importă și utilizează componenta copil de mai înainte. Componenta părinte definește a postList variabilă matrice ca referință reactivă. Componenta definește apoi an addPosturi funcția care rulează, luând a post argument. Funcția adaugă o nouă postare la matricea postList cu Apăsaţi() metodă.

The @buton-clic ascultătorul de evenimente captează evenimentul personalizat ChildComponent emite atunci când faceți clic pe butonul. Acest eveniment determină rularea funcției addPosts. În cele din urmă, blocul de cod atașează fișierul v-pentru directivă pentru redarea listelor în Vue la elementul ul pentru a repeta peste matricea postList.

Emiterea evenimentelor cu macro-ul defineEmits

Vue 3 a introdus defineEmits macro, care definește în mod explicit evenimentele pe care le poate emite o componentă. Această macrocomandă oferă o modalitate sigură de tip de a emite evenimente care conduc la o bază de cod mai structurată.

Iată un exemplu despre cum puteți utiliza macrocomanda defineEmits și o puteți apela în componenta copil:

 ChildComponent.vue 
<scenariuînființat>
import { ref } din "vue";
const emit = defineEmits(["clic pe buton"]);
const post = ref("");
const buttonClick = () => {
 emit("buton-click", post.value);
};
scenariu>
<șablon>
<div>
<intraretip="text"v-model="post" />
<butonv-on: faceți clic="buttonClick">Postbuton>
div>
șablon>

Deși funcționalitatea rămâne aceeași, există diferențe semnificative în sintaxa codului între blocul de cod de mai sus și cel cu $emite funcţie.

În acest bloc de cod, defineEmits macro definește apăsat butonul eveniment. Prin apelarea acestei macrocomenzi, blocul de cod returnează o funcție $emit, permițându-vă să emiteți evenimentele definite. Matricea transmisă macro-ului defineEmits din cadrul componentei va conține toate evenimentele pe care trebuie să le emitați componentei părinte.

În continuare, blocul de cod definește a butonulClic funcţie. Această funcție emite evenimentul apăsat pe butonul și variabila post către componenta părinte. Blocul șablon al componentei copil găzduiește un element buton.

Elementul buton are a v-on: faceți clic directivă care declanșează funcția buttonClick. Componenta părinte poate folosi apoi componenta copil în același mod ca și metoda $emit.

Dezvoltatorii Vue beneficiază de o arhitectură bazată pe componente

Puteți comunica de la o componentă copil cu părintele ei prin emiterea de evenimente folosind metoda $emit și macro-ul defineEmits.

Puteți beneficia de arhitectura bazată pe componente Vue, deoarece vă permite să scrieți cod mai structurat și concis. Cu cadre JavaScript moderne precum Vue, puteți utiliza Web Components, un standard web W3C, pentru a realiza această arhitectură bazată pe componente.