Phenquestions
Vue.js är en mångsidig och fullfjädrad ram för att bygga enorma webbapplikationer. Alla webbapplikationer är indelade i komponenterna. Till exempel en enkel webbplats som innehåller en rubrik, sidofält och några andra komponenter. För att hantera och hantera detta komponentbaserade tillvägagångssätt, Vue.js erbjuder förhållandet mellan förälder och barn mellan komponenterna och om vi vill skicka data över komponenter. Vue.js erbjuder rekvisita för att skicka data från föräldern till en underkomponent men för att skicka data från barnet till föräldern; vi måste avge anpassade händelser. I den här artikeln lär vi oss att avfyra och lyssna på anpassade händelser.Först och främst, låt oss se hur man avfyrar en anpassad händelse i Vue.js och sedan hur man lyssnar på den händelsen. Syntaxen för att skjuta en händelse i Vue.js är
detta.$ emit ('eventName')I denna syntax måste vi vara försiktiga när vi ger ett namn till händelsen eftersom vi använder samma namn; vi kommer senare att lyssna på denna händelse. För att lyssna på det här evenemanget kan vi lyssna på det när vi lyssnar på en klickhändelse i Vue.js. Till exempel
Vi kan skriva vilket uttryck som helst i inverterade kommatecken samt en funktion. Så låt oss prova ett exempel för att bättre förstå det.
Exempel
Anta att vi har en komponent som heter "parentComponent", som innehåller en underkomponent i den med namnet "childComponent" som vi skickar ett meddelande med hjälp av rekvisita.
Föräldrakomponent
Barnkomponent
I barnkomponenten får vi rekvisita och visar meddelandet i p-taggen.
msg
Nu efter att ha ställt in dessa två komponenter. Låt oss hälsa tillbaka till vår ParentComponent. För att säga hej tillbaka skapar vi först en knapp, och genom att klicka på den knappen kommer vi att kalla ”helloBack” -funktionen. När du har skapat knappen skulle barnkomponentens HTML vara så här
meddelande
Låt oss skapa funktionen “helloBackFunc” också i metodobjektet. I vilken vi kommer att avge "helloBackEvent" tillsammans med en "helloBackVar" -variabel som innehåller strängen "Hello Parent". Efter att ha skapat en funktion skulle javaskriptet för underkomponenten vara så här
Vi är klara med att skjuta evenemanget. Låt oss nu gå till den överordnade komponenten för att lyssna på händelsen.
I föräldrakomponenten kan vi helt enkelt lyssna på händelsen, precis som vi lyssnar på klickhändelsen. Vi kommer helt enkelt att lyssna på händelsen i ChildComponent-taggen och kallar ”tack ()” -funktionen på den.
I tackfunktionen tilldelar vi den skickade strängen till variabeln "thanksMessage". Efter att ha skapat funktionen och tilldelat den passerade strängen till variabeln, skulle javaskriptet till "parentComponent" vara så här
Och bind "variabeln" -variabeln i mallen någonstans för att se om den fungerar eller inte.
Föräldrakomponent
thanksMessage
Barnkomponent
När du har skapat och skrivit all den här koden går du till webbsidan och laddar om den för att få de senaste funktionerna.
Vi kan se att rekvisita överförs framgångsrikt till barnkomponenten. Nu, om vi klickar på knappen, som faktiskt finns i underkomponenten. Tackmeddelandet ska visas direkt efter den överordnade komponentrubriken.
Som du kan se visas den.
Så det här är hur vi kan avge eller avfyra anpassade händelser och lyssna på dem i någon annan komponent i Vue.js.
Sammanfattning
I den här artikeln har vi lärt oss att avge anpassade händelser i Vue.js. Den här artikeln innehåller ett steg för steg korrekt exempel för att förstå den med en kort förklaring tillsammans med den. Så vi hoppas att den här artikeln hjälper till att ha bättre och tydliga begrepp att avge anpassade händelser i Vue.js. För mer sådant användbart innehåll, fortsätt besöka linuxhint.com
