Vue.JS avgir tilpassede hendelser

Vue.JS er et allsidig og fullverdig ramme for å bygge enorme webapplikasjoner. Enhver webapplikasjon er delt inn i komponentene. For eksempel et enkelt nettsted som inkluderer en header, sidefelt og noen andre komponenter. For å administrere og håndtere denne komponentbaserte tilnærmingen, Vue.JS tilbyr foreldre-barn-forholdet mellom komponentene, og hvis vi ønsker å sende noen data på tvers av komponenter. Vue.JS tilbyr rekvisitter for å sende data fra foreldrene til en barnekomponent, men for å sende data fra barnet til foreldrene; Vi må avgi tilpassede hendelser. I denne artikkelen lærer vi om skyting og lytting til tilpassede hendelser.Først av alt, la oss se hvordan du skyter en tilpasset begivenhet i Vue.JS og deretter hvordan du kan høre på den hendelsen. Syntaksen for å skyte en begivenhet i Vue.JS er dette.$ emit ('EventName')

I denne syntaksen må vi være forsiktige mens vi gir et navn til hendelsen fordi vi bruker samme navn; Vi vil senere høre på dette arrangementet. For å lytte til dette arrangementet, kan vi lytte til det når vi lytter til et klikkhendelse i Vue.JS. For eksempel

Vi kan skrive ethvert uttrykk i de omvendte kommaene så vel som en funksjon. Så la oss prøve et eksempel for å forstå det bedre.

Eksempel

Anta at vi har en komponent som heter "ParentComponent", som inkluderer en barnekomponent i den med navnet "ChildComponent" som vi sender en melding ved hjelp av rekvisitter.

I barnekomponenten får vi rekvisitter og viser meldingen i 'P' -koden.

Nå etter å ha satt opp disse to komponentene. La oss si hei tilbake til foreldrekomponenten vår. For å si hei tilbake, vil vi først opprette en knapp, og med et klikk på den knappen, vil vi kalle "Helloback" -funksjonen. Etter å ha opprettet knappen, ville barnekomponentens HTML være slik

La oss opprette "HellobackFunc" -funksjonen i metodene objektet. Der vi vil avgi "hellobackevent" sammen med en "hellobackvar" -variabel som inneholder strengen "Hello Parent". Etter å ha opprettet en funksjon, ville javascriptet til barnekomponenten være slik

Vi er ferdige med å skyte arrangementet. La oss nå flytte til foreldrekomponenten for å lytte til arrangementet.

I foreldrekomponenten kan vi ganske enkelt lytte til arrangementet, akkurat som vi lytter til klikkhendelsen. Vi vil ganske enkelt lytte til arrangementet i Childcomponents tag og kaller "takk ()" -funksjonen på den.