Vue.js Aangepaste gebeurtenissen verzenden

Vue.js is een veelzijdig en volwaardig framework voor het bouwen van enorme webapplicaties. Elke webtoepassing is onderverdeeld in de componenten. Bijvoorbeeld een eenvoudige website met een koptekst, zijbalk en enkele andere componenten. Om deze op componenten gebaseerde benadering te beheren en te hanteren, heeft Vue.js biedt de ouder-kindrelatie tussen de componenten en als we wat gegevens over componenten willen verzenden. Vue.js biedt rekwisieten om gegevens van het bovenliggende naar een onderliggende component te verzenden, maar om gegevens van het kind naar de bovenliggende te verzenden; we moeten aangepaste evenementen uitzenden. In dit artikel leren we over het afvuren en luisteren naar aangepaste gebeurtenissen.Laten we eerst eens kijken hoe we een aangepaste gebeurtenis in Vue . kunnen activeren.js en hoe je naar dat evenement kunt luisteren. De syntaxis voor het starten van een evenement in Vue.js is

In deze syntaxis moeten we voorzichtig zijn bij het geven van een naam aan de gebeurtenis, omdat we dezelfde naam gebruiken; we zullen later naar dit evenement luisteren. Om naar deze gebeurtenis te luisteren, kunnen we ernaar luisteren zoals we luisteren naar een klikgebeurtenis in Vue.js. Bijvoorbeeld

We kunnen elke uitdrukking in de aanhalingstekens schrijven, evenals een functie. Dus laten we een voorbeeld proberen om het beter te begrijpen.

Voorbeeld

Stel dat we een component hebben met de naam "parentComponent", die een onderliggende component bevat met de naam "childComponent" waaraan we een bericht doorgeven met behulp van rekwisieten.

In de onderliggende component krijgen we rekwisieten en tonen we het bericht in de 'p'-tag.

Nu na het instellen van deze twee componenten. Laten we hallo zeggen tegen onze ParentComponent. Om hallo terug te zeggen, zullen we eerst een knop maken en met een klik op die knop zullen we de "helloBack" -functie aanroepen. Nadat de knop is gemaakt, ziet de HTML van de onderliggende component er als volgt uit:

Laten we de functie "helloBackFunc" ook in het object Methods maken. Waarin we de "helloBackEvent" samen met een "helloBackVar" -variabele zullen uitzenden die de tekenreeks "Hello Parent" bevat. Na het maken van een functie, ziet het javascript van de onderliggende component er als volgt uit:

We zijn klaar met het afvuren van het evenement. Laten we nu naar de bovenliggende component gaan om naar de gebeurtenis te luisteren.

In de bovenliggende component kunnen we gewoon naar de gebeurtenis luisteren, net zoals we luisteren naar de klikgebeurtenis. We luisteren gewoon naar de gebeurtenis in de tag van de ChildComponent en roepen de functie "thanks()" erop aan.