Hur man sänder ut händelser för att kommunicera mellan Vue-komponenter

Att strukturera dina webbapplikationer med hjälp av en komponentarkitektur gör det enkelt att bygga och underhålla din applikation.

Att skicka ut anpassade händelser är ett sätt att hantera kommunikation mellan komponenter; rekvisita och slots är två andra. Med anpassade händelser kan du skicka data från barnet till den överordnade komponenten.

Utsända händelser från ett barn till dess förälder

Vue erbjuder många alternativ för att kommunicera mellan komponenter. Ett viktigt sätt att kommunikation mellan komponenter sker genom rekvisita. Rekvisita låter dig skicka data från överordnade till underordnade komponenter.

Vad händer då om man vill skicka data från barnet till föräldrakomponenten? Vue låter dig sända anpassade händelser från underordnade till överordnade komponenter. Denna process gör det möjligt för den överordnade komponenten att använda data och funktioner från den underordnade komponenten.

Föreställ dig till exempel en knappkomponent med en funktion som returnerar ett värde vid varje klick. Du måste sända den händelsen till den överordnade komponenten för att den överordnade komponenten ska kunna uppdatera sitt tillstånd eller utföra en åtgärd baserat på det returnerade värdet.

Namnkonvention för anpassade emitterade händelser i Vue

Innan du dyker in i hur man sänder ut anpassade händelser måste du förstå namnkonventionen för anpassade händelser i Vue. Innan Vue 3 dök upp var utvecklarna strikt tvungna att definiera anpassade händelser med kebab-fodral, separerar ord i namn med ett bindestreck.

Det är nu standardpraxis att definiera dina anpassade händelser i kebab-fall när du arbetar med HTML-mallar, och camelCase när du arbetar med JavaScript. Du kan dock välja att använda vilket alternativ som helst när du arbetar med JavaScript, eftersom Vue kompilerar alla anpassade händelser tillbaka till kebab-case.

När du sänder ut en anpassad händelse, förmedla händelsens syfte med ett beskrivande namn. Detta är mycket viktigt, särskilt när du arbetar i ett team, för att göra evenemangets syfte tydligt.

Hur man skickar ut anpassade händelser från barn till förälderkomponent

Det finns två sätt du kan åstadkomma att sända ut anpassade händelser i Vue. Du kan sända anpassade händelser inline (direkt i Vue-mallen) med $emit metod som Vue tillhandahåller. Du kan också använda dig av defineEmits makro tillgängligt från Vue 3.

Sända ut anpassade händelser i Vue med $emit-metoden

$emit, en inbyggd Vue-metod, tillåter en underordnad komponent att skicka en händelse till sin överordnade komponent. Du anropar den här metoden in-line (inom den underordnade komponentens mall) för att utlösa den anpassade händelsen. $emit-metoden tar två argument: namnet på händelsen du vill sända och en valfri nyttolast som kan bära ytterligare data.

Tänk på den här underordnade komponenten som avger en händelse för att meddela den överordnade komponenten om ett knappklick:

 ChildComponent.vue 
<manusuppstart>
importera { ref } från 'vue';
const post = ref('')
manus>
<mall>
<div>
<inmatningtyp="text"v-modell="posta">
<knappv-on: klicka="$emit('knapp-klickad', post)">Postaknapp>
div>
mall>

Detta kodblock visar hur man sänder ut en anpassad händelse från en underordnad komponent. Barnet börjar med att initiera en postvariabel med en tom sträng.

Den underordnade komponenten binder sedan ingångselementet till postvariabeln med v-modellen, a Vue databindande direktiv. Denna bindning tillåter ändringar du gör i inmatningsfältet för att uppdatera postvariabeln automatiskt.

Knappelementet har ett v-on-direktiv som lyssnar efter klickhändelser på knappen. Knappklickningen anropar metoden $emit med två argument: händelsenamnet, "knappklickad" och värdet på postvariabeln.

Den överordnade komponenten kan nu lyssna efter den anpassade händelsen med v-on-direktivet för hantera händelser i Vue:

 ParentComponent.vue 
importera { ref } från "vue";
importera ChildComponent från "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
manus>
<mall>
<div>
<ChildComponent @knappklickad="lägg till inlägg"/>
<ul>
<liv-för="inlägg i postlistan">{{ post }}li>
ul>
div>
mall>

Detta kodblock visar en överordnad komponent som importerar och använder den underordnade komponenten från tidigare. Den överordnade komponenten definierar en postlista arrayvariabel som en reaktiv referens. Komponenten definierar sedan en lägg till inlägg funktion som körs, tar en posta argument. Funktionen lägger till ett nytt inlägg i postList-arrayen med skjuta på() metod.

De @knapp-klickad händelseavlyssnaren fångar den anpassade händelsen ChildComponent avges när du klickar på knappen. Denna händelse gör att addPosts-funktionen körs. Slutligen fäster kodblocket v-för direktiv för renderingslistor i Vue till ul-elementet för att iterera över postList-matrisen.

Sänder ut händelser med makrot defineEmits

Vue 3 introducerade defineEmits makro, som uttryckligen definierar de händelser som en komponent kan avge. Detta makro ger ett typsäkert sätt att sända ut händelser som leder till en mer strukturerad kodbas.

Här är ett exempel på hur du kan använda makrot defineEmits och kalla det i din underordnade komponent:

 ChildComponent.vue 
<manusuppstart>
importera { ref } från "vue";
const emit = defineEmits(["knapp-klickad"]);
const post = ref("");
const buttonClick = () => {
 emit("knapp-klickad", post.value);
};
manus>
<mall>
<div>
<inmatningtyp="text"v-modell="posta" />
<knappv-on: klicka="buttonClick">Postaknapp>
div>
mall>

Även om funktionaliteten förblir densamma, finns det betydande skillnader i kodsyntaxen mellan ovanstående kodblock och det med $emit fungera.

I detta kodblock är defineEmits makro definierar knappklickad händelse. Genom att anropa detta makro returnerar kodblocket en $emit-funktion, som låter dig sända de definierade händelserna. Arrayen som skickas till defineEmits-makrot i komponenten kommer att innehålla alla händelser du behöver skicka till den överordnade komponenten.

Därefter definierar kodblocket a knappKlicka fungera. Den här funktionen skickar den knappklickade händelsen och postvariabeln till den överordnade komponenten. Mallblocket för den underordnade komponenten innehåller ett knappelement.

Knappelementet har en v-on: klicka direktiv som utlöser knappenKlick-funktionen. Den överordnade komponenten kan sedan använda den underordnade komponenten på samma sätt som den gjorde med metoden $emit.

Vue-utvecklare drar nytta av en komponentbaserad arkitektur

Du kan kommunicera från en underordnad komponent till dess förälder genom att sända händelser med metoden $emit och makrot defineEmits.

Du kan dra nytta av Vues komponentbaserade arkitektur eftersom den låter dig skriva mer strukturerad, koncis kod. Med moderna JavaScript-ramverk som Vue kan du använda Web Components, en W3C-webbstandard, för att uppnå denna komponentbaserade arkitektur.