Vue.js Emit brugerdefinerede begivenheder

Vue.js er en alsidig og fuldgyldig ramme til opbygning af enorme webapplikationer. Enhver webapplikation er opdelt i komponenterne. For eksempel et simpelt websted, der indeholder et overskrift, sidebjælke og nogle andre komponenter. For at styre og håndtere denne komponentbaserede tilgang, Vue.js tilbyder forholdet mellem forældre og barn mellem komponenterne, og hvis vi vil sende nogle data på tværs af komponenter. Vue.js tilbyder rekvisitter til at sende data fra forælderen til en underordnet komponent, men til at sende data fra barnet til forældren; vi er nødt til at udsende tilpassede begivenheder. I denne artikel lærer vi om fyring og lytning til brugerdefinerede begivenheder.Lad os først og fremmest se, hvordan man fyrer en brugerdefineret begivenhed i Vue.js og derefter hvordan man lytter til begivenheden. Syntaksen for at affyre en begivenhed i Vue.js er

I denne syntaks skal vi være forsigtige med at give et navn til begivenheden, fordi vi bruger det samme navn; vi vil senere lytte til denne begivenhed. For at lytte til denne begivenhed kan vi lytte til den, når vi lytter til en klikbegivenhed i Vue.js. For eksempel

Vi kan skrive ethvert udtryk i de inverterede kommaer samt en funktion. Så lad os prøve et eksempel for bedre at forstå det.

Eksempel

Antag, at vi har en komponent ved navn "parentComponent", som inkluderer en underordnet komponent i den med navnet "childComponent", som vi sender en meddelelse til ved hjælp af rekvisitter.

I underkomponenten får vi rekvisitter og viser meddelelsen i 'p' taggen.

Nu efter at have oprettet disse to komponenter. Lad os sige hej tilbage til vores ParentComponent. For at sige hej tilbage, opretter vi først en knap, og ved at klikke på denne knap kalder vi "helloBack" -funktionen. Når du har oprettet knappen, vil den underordnede komponents HTML være sådan

Lad os også oprette "helloBackFunc" -funktionen i metodens objekt. I hvilken vi udsender "helloBackEvent" sammen med en "helloBackVar" -variabel, der indeholder strengen "Hello Parent". Efter oprettelse af en funktion ville javascriptet til underordnet komponent være sådan

Vi er færdige med at skyde begivenheden. Lad os nu gå til den overordnede komponent for at lytte til begivenheden.

I forældrekomponenten kan vi simpelthen lytte til begivenheden, ligesom vi lytter til klikhændelsen. Vi vil simpelthen lytte til begivenheden i ChildComponent's tag og kalder “tak ()” -funktionen på den.