Gebeurtenissen uitzenden om te communiceren tussen Vue-componenten

Door uw webapplicaties te structureren met behulp van een componentenarchitectuur, kunt u uw applicatie eenvoudig bouwen en onderhouden.

Het uitzenden van aangepaste gebeurtenissen is een manier waarop u de communicatie tussen componenten kunt afhandelen; rekwisieten en slots zijn twee andere. Met aangepaste gebeurtenissen kunt u gegevens van het onderliggende naar het bovenliggende onderdeel verzenden.

Gebeurtenissen verzenden van een kind naar zijn ouder

Vue biedt veel mogelijkheden om tussen componenten te communiceren. Een belangrijke manier van communicatie tussen componenten is door middel van rekwisieten. Met rekwisieten kunt u gegevens van bovenliggende naar onderliggende componenten verzenden.

Wat gebeurt er dan als u gegevens van het kind naar het bovenliggende onderdeel wilt sturen? Met Vue kunt u aangepaste gebeurtenissen uitzenden van onderliggende naar bovenliggende componenten. Dit proces stelt de bovenliggende component in staat om gegevens en functies van de onderliggende component te gebruiken.

Stel je bijvoorbeeld een knopcomponent voor met een functie die bij elke klik een waarde retourneert. U moet die gebeurtenis verzenden naar de bovenliggende component om ervoor te zorgen dat de bovenliggende component zijn status kan bijwerken of een actie kan uitvoeren op basis van de geretourneerde waarde.

Naamgevingsconventie voor op maat gemaakte gebeurtenissen in Vue

Voordat u ingaat op het uitzenden van aangepaste gebeurtenissen, moet u de naamgevingsconventie voor aangepaste gebeurtenissen in Vue begrijpen. Voordat Vue 3 verscheen, moesten ontwikkelaars strikt aangepaste evenementen definiëren kebab-koffer, woorden in namen scheiden met een koppelteken.

Het is nu standaardpraktijk om uw aangepaste gebeurtenissen in kebab-case te definiëren wanneer u met HTML-sjablonen werkt, en kameelgeval bij het werken met JavaScript. U kunt er echter voor kiezen om elke optie te gebruiken wanneer u met JavaScript werkt, aangezien Vue alle aangepaste gebeurtenissen terug compileert naar kebab-case.

Wanneer je een aangepaste gebeurtenis uitzendt, breng dan het doel van de gebeurtenis over met een beschrijvende naam. Dit is erg belangrijk, vooral als je in een team werkt, om het doel van het evenement duidelijk te maken.

Aangepaste gebeurtenissen uitsturen van onderliggende naar bovenliggende component

Er zijn twee manieren om aangepaste gebeurtenissen in Vue uit te zenden. U kunt aangepaste gebeurtenissen inline uitzenden (rechtstreeks in de Vue-sjabloon) met de $ uitstoten methode die Vue biedt. U kunt ook gebruik maken van de definieerEmits macro beschikbaar vanaf Vue 3.

Aangepaste gebeurtenissen uitzenden in Vue met de $emit-methode

$ uitstoten, een ingebouwde Vue-methode, stelt een onderliggende component in staat een gebeurtenis naar de bovenliggende component te sturen. U roept deze methode inline aan (binnen de sjabloon van de onderliggende component) om de aangepaste gebeurtenis te activeren. De $emit-methode heeft twee argumenten: de naam van de gebeurtenis die u wilt uitzenden en een optionele payload die aanvullende gegevens kan bevatten.

Overweeg deze onderliggende component die een gebeurtenis uitzendt om de bovenliggende component op de hoogte te stellen van een klik op een knop:

 ChildComponent.vue 
<scriptopgericht>
importeer { ref } van 'vue';
const bericht = ref('')
script>
<sjabloon>
<div>
<invoertype="tekst"v-model="na">
<knopv-aan: klik="$emit('knop-geklikt', post)">Naknop>
div>
sjabloon>

Dit codeblok laat zien hoe een aangepaste gebeurtenis uit een onderliggend onderdeel kan worden uitgezonden. Het kind begint met het initialiseren van een postvariabele met een lege string.

De onderliggende component bindt vervolgens het invoerelement aan de postvariabele met v-model, a Vue gegevens bindende richtlijn. Met deze binding kunnen wijzigingen die u in het invoerveld aanbrengt, de postvariabele automatisch bijwerken.

Het knopelement heeft een v-on-richtlijn die luistert naar klikgebeurtenissen op de knop. De knopklik roept de $emit-methode aan met twee argumenten: de gebeurtenisnaam, "button-clicked", en de waarde van de post-variabele.

De bovenliggende component kan nu luisteren naar de aangepaste gebeurtenis met de v-on-richtlijn voor het afhandelen van gebeurtenissen in Vue:

 ParentComponent.vue 
importeer { ref } van "vue";
importeer ChildComponent uit "./components/ChildComponent.vue";
const postLijst = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
script>
<sjabloon>
<div>
<Kindcomponent @knop-geklikt="Berichten toevoegen"/>
<ul>
<liv-voor="post in postLijst">{{ na }}li>
ul>
div>
sjabloon>

Dit codeblok demonstreert een oudercomponent die de onderliggende component van vroeger importeert en gebruikt. De bovenliggende component definieert een postLijst array-variabele als een reactieve referentie. De component definieert vervolgens een voeg berichten toe functie die wordt uitgevoerd, waarbij a na argument. De functie voegt een nieuwe post toe aan de postList array met de duw() methode.

De @button-geklikt gebeurtenislistener legt de aangepaste gebeurtenis vast Kindcomponent wordt uitgezonden wanneer u op de knop klikt. Deze gebeurtenis zorgt ervoor dat de functie addPosts wordt uitgevoerd. Ten slotte voegt het codeblok de v-voor richtlijn voor lijsten weergeven in Vue naar het ul-element om de postList-array te herhalen.

Gebeurtenissen uitzenden Met de defineEmits Macro

Vue 3 introduceerde de definieerEmits macro, die expliciet de gebeurtenissen definieert die een component kan uitzenden. Deze macro biedt een typeveilige manier om gebeurtenissen uit te zenden die leiden tot een meer gestructureerde codebase.

Hier is een voorbeeld van hoe u de defineEmits-macro kunt gebruiken en deze kunt aanroepen in uw onderliggende component:

 ChildComponent.vue 
<scriptopgericht>
importeer { ref } van "vue";
const emit = defineEmits(["knop-geklikt"]);
const bericht = ref("");
const buttonKlik = () => {
 emit("op een knop geklikt", post.value);
};
script>
<sjabloon>
<div>
<invoertype="tekst"v-model="na" />
<knopv-aan: klik="knopKlik">Naknop>
div>
sjabloon>

Hoewel de functionaliteit hetzelfde blijft, zijn er significante verschillen in de codesyntaxis tussen het bovenstaande codeblok en dat met het $ uitstoten functie.

In dit codeblok wordt de definieerEmits macro definieert de knop-geklikt evenement. Door deze macro aan te roepen, retourneert het codeblok een $emit-functie, waarmee u de gedefinieerde gebeurtenissen kunt uitzenden. De array die wordt doorgegeven aan de defineEmits-macro binnen de component, bevat alle gebeurtenissen die u nodig hebt om naar de bovenliggende component te zenden.

Vervolgens definieert het codeblok a knopKlik functie. Deze functie verzendt de gebeurtenis waarop op een knop is geklikt en de postvariabele naar de bovenliggende component. Het sjabloonblok van de onderliggende component bevat een knopelement.

Het knopelement heeft een v-aan: klik richtlijn die de functie buttonClick activeert. De parent-component kan dan de child-component op dezelfde manier gebruiken als bij de $emit-methode.

Vue-ontwikkelaars profiteren van een op componenten gebaseerde architectuur

U kunt communiceren van een onderliggende component naar zijn bovenliggende component door gebeurtenissen uit te zenden met behulp van de $emit-methode en de defineEmits-macro.

U kunt profiteren van de op componenten gebaseerde architectuur van Vue, omdat u hiermee meer gestructureerde, beknopte code kunt schrijven. Met moderne JavaScript-frameworks zoals Vue kunt u Web Components, een W3C-webstandaard, gebruiken om deze op componenten gebaseerde architectuur te bereiken.