Phenquestions
Vue.js er et allsidig og fullverdig rammeverk for å bygge store webapplikasjoner. Enhver webapplikasjon er delt inn i komponentene. For eksempel et enkelt nettsted som inneholder en overskrift, 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 vil sende data på tvers av komponentene. Vue.js tilbyr rekvisitter for å sende data fra foreldrene til en underordnet komponent, men for å sende data fra barnet til forelderen; vi må sende egendefinerte hendelser. I denne artikkelen lærer vi om å skyte og lytte til tilpassede hendelser.Først av alt, la oss se hvordan du fyrer en tilpasset hendelse i Vue.js og hvordan du kan lytte til den hendelsen. Syntaksen for å skyte en hendelse i Vue.js er
dette.$ emit ('eventName')I denne syntaksen må vi være forsiktige med å gi et navn til arrangementet fordi vi bruker samme navn; vi vil senere lytte til denne hendelsen. For å lytte til denne hendelsen, kan vi lytte til den når vi lytter til en klikkhendelse i Vue.js. For eksempel
Vi kan skrive hvilket som helst uttrykk i inverterte kommaer samt en funksjon. Så la oss prøve et eksempel for bedre å forstå det.
Eksempel
Anta at vi har en komponent som heter "parentComponent", som inkluderer en underordnet komponent i den med navnet "childComponent" som vi sender en melding til ved hjelp av rekvisitter.
Foreldrekomponent
Barnekomponent
I barnekomponenten får vi rekvisitter og viser meldingen i 'p' -koden.
msg
Nå etter å ha satt opp disse to komponentene. La oss si hei tilbake til vår foreldrekomponent. For å hilse tilbake, oppretter vi først en knapp, og ved å klikke på den knappen vil vi kalle "helloBack" -funksjonen. Etter at du har opprettet knappen, vil den underordnede komponentens HTML være slik
beskjed
La oss opprette "helloBackFunc" -funksjonen også i metodens objekt. I hvilken vi vil sende ut "helloBackEvent" sammen med en "helloBackVar" -variabel som inneholder strengen "Hello Parent". Etter å ha opprettet en funksjon, vil javascriptet til underordnet komponent være slik
Vi er ferdige med å skyte arrangementet. La oss nå gå til foreldrekomponenten for å lytte til hendelsen.
I foreldrekomponenten kan vi bare lytte til hendelsen, akkurat som vi lytter til klikkhendelsen. Vi vil bare lytte til hendelsen i ChildComponent-koden og kaller “takk ()” -funksjonen på den.
I takkefunksjonen tildeler vi den sendte strengen til variabelen som heter "thanksMessage". Etter å ha opprettet funksjonen og tilordnet den sendte strengen til variabelen, vil javaskriptet til "parentComponent" være slik
Og bind "thanksMessage" -variabelen i malen et sted for å se om den fungerer eller ikke.
Foreldrekomponent
thanksMessage
Barnekomponent
Etter å ha opprettet og skrevet all denne koden, gå til websiden og last den på nytt for å få de nyeste funksjonene.
Vi kan se at rekvisittene overføres vellykket til barnekomponenten. Nå, hvis vi klikker på knappen, som faktisk er i underordnet komponent. Takkmeldingen skal vises rett etter den overordnede komponentoverskriften.
Som du ser, vises den.
Så dette er hvordan vi kan sende ut eller skyte de egendefinerte hendelsene og lytte til dem i en annen komponent i Vue.js.
Sammendrag
I denne artikkelen har vi lært å avgi egendefinerte hendelser i Vue.js. Denne artikkelen inneholder et riktig trinnvis eksempel for å forstå den med en kort forklaring sammen med den. Så vi håper denne artikkelen hjelper deg med å ha bedre og klare konsepter for å sende ut egendefinerte hendelser i Vue.js. For mer slikt nyttig innhold, fortsett å besøke linuxhint.com
