Sådan udsender du hændelser for at kommunikere mellem Vue-komponenter

Strukturering af dine webapplikationer ved hjælp af en komponentarkitektur gør det nemt at bygge og vedligeholde din applikation.

Udsendelse af tilpassede hændelser er en måde, hvorpå du kan håndtere kommunikation mellem komponenter; rekvisitter og slots er to andre. Brugerdefinerede hændelser giver dig mulighed for at sende data fra barnet til den overordnede komponent.

Udsende begivenheder fra et barn til dets forælder

Vue tilbyder en masse muligheder for at kommunikere mellem komponenter. En væsentlig måde at kommunikation mellem komponenter er gennem rekvisitter. Rekvisitter giver dig mulighed for at sende data fra overordnede til underordnede komponenter.

Hvad sker der så, hvis du vil sende data fra barnet til den overordnede komponent? Vue giver dig mulighed for at udsende tilpassede hændelser fra underordnede til overordnede komponenter. Denne proces gør det muligt for den overordnede komponent at bruge data og funktioner fra den underordnede komponent.

Forestil dig for eksempel en knapkomponent med en funktion, der returnerer en værdi ved hvert klik. Du skal udsende denne hændelse til den overordnede komponent for at gøre det muligt for den overordnede komponent at opdatere sin tilstand eller udføre en handling baseret på den returnerede værdi.

Navnekonvention for tilpassede udsendte hændelser i Vue

Før du dykker ned i, hvordan du udsender tilpassede hændelser, skal du forstå navnekonventionen for tilpassede hændelser i Vue. Før Vue 3 dukkede op, var udviklere strengt nødt til at definere tilpassede begivenheder med kebab-etui, adskiller ord i navne med en bindestreg.

Det er nu standard praksis at definere dine tilpassede begivenheder i kebab-case, når du arbejder med HTML-skabeloner, og camelCase når du arbejder med JavaScript. Du kan dog vælge at bruge enhver mulighed, når du arbejder med JavaScript, da Vue kompilerer alle tilpassede begivenheder tilbage til kebab-case.

Når du udsender en tilpasset begivenhed, skal du formidle begivenhedens formål med et beskrivende navn. Dette er meget vigtigt, især når du arbejder i et team, for at gøre begivenhedens formål klart.

Sådan udsender du tilpassede hændelser fra barn til forældrekomponent

Der er to måder, hvorpå du kan udsende tilpassede begivenheder i Vue. Du kan udsende tilpassede begivenheder inline (direkte i Vue-skabelonen) med $udsende metode, som Vue tilbyder. Du kan også gøre brug af defineEmits makro tilgængelig fra Vue 3.

Udsendelse af tilpassede hændelser i Vue med $emit-metoden

$udsende, en indbygget Vue-metode, tillader en underordnet komponent at sende en hændelse til dens overordnede komponent. Du kalder denne metode in-line (inden for den underordnede komponents skabelon) for at udløse den tilpassede hændelse. $emit-metoden tager to argumenter: navnet på den begivenhed, du vil udsende, og en valgfri nyttelast, der kan bære yderligere data.

Overvej denne underordnede komponent, der udsender en hændelse for at underrette den overordnede komponent om et knapklik:

 ChildComponent.vue 
<manuskriptOpsætning>
import { ref } fra 'vue';
const post = ref('')
manuskript>
<skabelon>
<div>
<inputtype="tekst"v-model="stolpe">
<knapv-on: klik="$emit('button-clicked', post)">Stolpeknap>
div>
skabelon>

Denne kodeblok viser, hvordan man udsender en tilpasset hændelse fra en underordnet komponent. Barnet starter med at initialisere en post-variabel med en tom streng.

Den underordnede komponent binder derefter input-elementet til post-variablen med v-model, en Vue data bindende direktiv. Denne binding tillader ændringer, du foretager i inputfeltet, for at opdatere postvariablen automatisk.

Knapelementet har et v-on-direktiv, der lytter efter klikhændelser på knappen. Knapklikket kalder $emit-metoden med to argumenter: hændelsesnavnet, "button-clicked" og værdien af ​​post-variablen.

Den overordnede komponent kan nu lytte efter den tilpassede hændelse med v-on-direktivet for håndtering af begivenheder i Vue:

 ParentComponent.vue 
import { ref } fra "vue";
importer ChildComponent fra "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
manuskript>
<skabelon>
<div>
<ChildComponent @knap-klikket="tilføj indlæg"/>
<ul>
<liv-for="indlæg i postliste">{{ indlæg }}li>
ul>
div>
skabelon>

Denne kodeblok demonstrerer en overordnet komponent, der importerer og bruger den underordnede komponent fra før. Den overordnede komponent definerer en postliste array-variabel som en reaktiv reference. Komponenten definerer derefter en tilføje indlæg funktion, der kører, tager en stolpe argument. Funktionen tilføjer et nyt indlæg til postList-arrayet med skubbe() metode.

Det @knap-klikket begivenhedslytter fanger den tilpassede begivenhed ChildComponent udsendes, når du klikker på knappen. Denne hændelse får funktionen addPosts til at køre. Endelig vedhæfter kodeblokken v-for direktiv for gengivelseslister i Vue til ul-elementet for at iterere over postList-arrayet.

Udsendelse af hændelser med defineEmits-makroen

Vue 3 introducerede defineEmits makro, som eksplicit definerer de hændelser, en komponent kan udsende. Denne makro giver en typesikker måde at udsende hændelser, der fører til en mere struktureret kodebase.

Her er et eksempel på, hvordan du kan bruge defineEmits-makroen og kalde den i din underordnede komponent:

 ChildComponent.vue 
<manuskriptOpsætning>
import { ref } fra "vue";
const emit = defineEmits(["knap-klikket"]);
const post = ref("");
const knapKlik = () => {
 emit("knap-klikket", post.value);
};
manuskript>
<skabelon>
<div>
<inputtype="tekst"v-model="stolpe" />
<knapv-on: klik="knapKlik">Stolpeknap>
div>
skabelon>

Selvom funktionaliteten forbliver den samme, er der betydelige forskelle i kodesyntaksen mellem ovenstående kodeblok og den med $udsende fungere.

I denne kodeblok er defineEmits makro definerer knap-klikket begivenhed. Ved at kalde denne makro returnerer kodeblokken en $emit-funktion, så du kan udsende de definerede hændelser. Det array, der sendes til defineEmits-makroen i komponenten, vil indeholde alle de hændelser, du skal udsende til den overordnede komponent.

Dernæst definerer kodeblokken en knapKlik fungere. Denne funktion udsender hændelsen med knap-klikkede og post-variablen til den overordnede komponent. Skabelonblokken til den underordnede komponent rummer et knapelement.

Knapelementet har en v-on: klik direktiv, der udløser knappenKlik-funktionen. Den overordnede komponent kan derefter bruge den underordnede komponent på samme måde, som den gjorde med $emit-metoden.

Vue-udviklere drager fordel af en komponentbaseret arkitektur

Du kan kommunikere fra en underordnet komponent til dens overordnede komponent ved at udsende hændelser ved at bruge $emit-metoden og defineEmits-makroen.

Du kan drage fordel af Vues komponentbaserede arkitektur, da den giver dig mulighed for at skrive mere struktureret, kortfattet kode. Med moderne JavaScript-rammer som Vue kan du bruge Web Components, en W3C-webstandard, til at opnå denne komponentbaserede arkitektur.