Händelser i LWC används för att kommunicera med komponenterna. Om det finns relaterade komponenter kan det vara möjligt att kommunicera från förälder till barn eller barn till förälder. Om det finns två orelaterade komponenter kan vi kommunicera via PubSub-modellen (Publish-Subscribe) eller med Lightning Message Service (LMS). I den här guiden kommer vi att diskutera hur man kommunicerar med händelser från förälder till barn, barn till förälder och relaterade komponenter med hjälp av PubSub-modellen.
Du kan placera komponenterna på din postsida, appsida eller startsida. Vi kommer inte att specificera denna fil (meta-xml) igen under exempelkodavsnitten:
xml-version = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< är Exponerad > Sann är Exponerad >
< mål >
< mål > lightning__RecordPage mål >
< mål > lightning__AppPage mål >
< mål > blixt__Hemsida mål >
mål >
LightningComponentBundle >
Kommunikation mellan föräldrar och barn
Om två komponenter är relaterade till varandra är denna kommunikation möjlig. Här skickar föräldern uppgifterna till barnet. Den överordnade komponenten innehåller den underordnade komponenten. Med detta tillvägagångssätt kan vi överföra primitiva data (heltal, sträng, boolesk, etc) från förälder till barn, skicka icke-primitiva data (matris, objekt, uppsättning av objekt, etc) från förälder till barn, skicka data till barnkomponenten med åtgärden på föräldern.
För att kommunicera föräldern till barnet måste vi göra fälten, egenskaperna och metoderna tillgängliga i barnkomponenten offentligt synliga. Detta kan vara möjligt genom att dekorera fälten, egenskaperna och metoderna med 'api'-dekoratören.
Exempel : Deklarera en variabel med 'api' i Child-komponentens 'js'-fil.
@ api-variabel ;
Nu använder Parent-komponenten Child-komponenten i HTML-filen via HTML-attributen.
Exempel : Använd variabeln i den överordnade HTML-filen.
< c - barn - komp variabel > c - barn - komp >
Låt oss diskutera några exempel som beskriver hur man kommunicerar med förälder till barn.
Exempel 1:
Detta grundläggande exempel visar att få en information som skickas av föräldern till barnet.
childtComp.js
Först skapar vi en Child-komponent som innehåller variabeln 'information' som är allmänt tillgänglig.
// Deklarera variabeln som offentlig med hjälp av api Decorator@ api-information
Du kan se hela 'js'-koden i följande skärmdump:
childtComp.html
Nu anger vi denna variabel i HTML-filen i mitttaggen.
< mall >< blixt - korttitel = 'Barn' >
< Centrum >
< b > { information } b >
Centrum >
blixt - kort >
mall >
parentComp.js
Vi gör ingenting i 'js'-filen.
parentComp.html
Placera den tidigare Child-komponenten i din överordnade HTML genom att skicka den offentliga variabeln (information) med lite text.
< mall >< blixt - korttitel = 'Förälder' ikon - namn = 'standard:konto' >
< c - barnt - komp
information = 'Hej, jag har fått information...'
> c - barnt - komp >
blixt - kort >
mall >
Produktion:
Gå nu till din Salesforce-organisation och placera den överordnade komponenten på sidan 'Record'. Du kommer att se att barnkomponenten fick informationen från föräldern.
Exempel 2:
Låt oss skapa två inmatningstextfält som accepterar texten dynamiskt från användargränssnittet i den överordnade komponenten. Om vi infogar den första texten i Parent-komponenten får den underordnade komponenten denna text med versaler. På samma sätt tar den emot texten med gemener om vi infogar den andra texten.
childtComp.js
Skapa två variabler – information1 och information2 – med en spårdekoratör.
- Skapa metoden convertToUpper() med 'api'-dekoratorn som konverterar den första inmatningstexten till versaler.
- Skapa metoden convertToLower() med 'api'-dekoratorn som konverterar den andra inmatningstexten till gemener.
@ spårinformation2 ;
@ api
convertToUpper ( faktisk info1 ) {
detta . Information1 = faktisk info1. till versaler ( ) ;
}
@ api
convertToLower ( faktisk info1 ) {
detta . Information 2 = faktisk info1. till LowerCase ( ) ;
}
Hela 'js'-koden ser ut så här:
childtComp.html
Vi visar värdena (Information1 och Information2) som kommer från 'js'-filen.
< mall >< blixt - korttitel = 'Barn' >
Versaler :& nbsp ; < b > { Information1 } b >< br >
Små bokstäver :& nbsp ; < b > { Information 2 } b >
blixt - kort >
mall >
parentComp.js
Vi skapar två hanterarmetoder som väljer den underordnade HTML-mallen genom querySelector(). Se till att du måste skicka rätt metoder som konverterar texten till versaler eller gemener.
hanteraEvent1 ( händelse ) {detta . mall . querySelector ( 'c-childt-comp' ) . convertToUpper ( händelse. mål . värde ) ;
}
hanteraEvent2 ( händelse ) {
detta . mall . querySelector ( 'c-childt-comp' ) . convertToLower ( händelse. mål . värde ) ;
}
Hela 'js'-koden ser ut så här:
parentComp.html
Skapa en inmatningstext med hanteringshändelser för dem båda. Placera Child-komponenten i denna Parent-komponent.
< mall >< blixt - korttitel = 'Förälder' >
< Centrum >
< blixt - inmatningsetikett = 'Skriv in texten med gemener' vid förändring = { hanteraEvent1 } > blixt - inmatning >
Centrum >
< br >< br >
< Centrum >
< blixt - inmatningsetikett = 'Skriv in texten med versaler' vid förändring = { hanteraEvent2 } > blixt - inmatning >
Centrum >
< br >< br >< br >
< c - barnt - komp > c - barnt - komp >
blixt - kort >
mall >
Produktion:
Gå nu till din Salesforce-organisation och placera den överordnade komponenten på sidan 'Record'.
Du kommer att se två textinmatningar i användargränssnittet.
Låt oss skriva lite text i den första inmatningen och du kommer att se att texten konverteras till versaler och visas i Child-komponenten.
Skriv lite text i den andra inmatningen så ser du att texten konverteras till gemener och visas i Child-komponenten.
Kommunikation mellan barn och förälder
I likhet med den tidigare kommunikationen, för att kommunicera barnet till föräldern, bör båda komponenterna relatera till varandra. Vi kan kommunicera barnet till föräldern på tre olika sätt: att kalla föräldern till barnet med hjälp av en enkel händelse och att kalla föräldern till barnet med hjälp av en händelse med data och händelse bubblande. Vi kommer att titta på den enkla händelsen i den här guiden.
För att kommunicera barnet till föräldern måste vi skapa och skicka händelserna. För det måste en anpassad händelse skapas. En anpassad händelse är en händelse som skapas av dig själv. Vi kan skapa det med det nya nyckelordet. Event_Name kan vara vad som helst (det kan vara en sträng, inte utöver versaler eller siffror). För närvarande kommer vi inte att diskutera alternativen.
Syntax : new CustomEvent(‘Event_Name’,{options...})
Nu har du den anpassade händelsen. Nästa steg är att skicka evenemanget. För att skicka händelsen måste vi specificera händelsen som vi skapade i EventTarget.dispatchEvent() -metoden.
Syntax : this.displatchEvent(new CustomEvent(‘Event_Name’,{options...})
Äntligen måste vi hantera händelsen. Nu måste vi anropa den underordnade komponenten i din överordnade komponent. Skicka ditt evenemangsnamn genom att ange prefixet 'på' till ditt evenemangsnamn. Detta tar händelseavlyssnarhanteraren.
Syntax:
< c - barn - komponent onyourEventName = { lyssnareHandler } > c - barn - komponent >Exempel:
I det här exemplet skapar vi en Parent-komponent (exampleParent) och två Child-komponenter.
- I det första Child (exampleChild) skapar vi en inmatningstext som låter användaren tillhandahålla lite text. Samma text visas i den överordnade komponenten med versaler.
- I det andra barnet (barn2) skapar vi en inmatningstext som låter användaren tillhandahålla lite text. Samma text visas i den överordnade komponenten med gemener.
exempelChild.js
Vi skapar en handleChange1-metod som skapar 'linuxhintevent1' CustomEvent med detaljen som målvärde. Efter det skickar vi detta evenemang. Bädda in följande utdrag i denna 'js'-fil.
// hantera händelsenhandtagChange1 ( händelse ) {
händelse. förhindraStandard ( ) ;
konst namn1 = händelse. mål . värde ;
konst välj Händelse1 = ny CustomEvent ( 'linuxhintevent1' , {
detalj : namn1
} ) ;
detta . dispatchEvent ( välj Händelse1 ) ;
}
exempelChild.html
Den tidigare hanteringsmetoden som skapas i 'js' hanteras baserat på blixtens input i HTML-komponenten.
< mall >< blixt - korttitel = 'Barn 1' >
< div klass = 'slds-m-around_medium' >
< blixt - inmatningsetikett = 'Skriv in text med gemener' vid förändring = { handtagChange1 } > blixt - inmatning >
div >
blixt - kort >
mall >
barn2.js
Vi skapar en handleChange2-metod som skapar 'linuxhintevent2' CustomEvent med detaljen som målvärde. Efter det skickar vi detta evenemang.
handleChange2 ( händelse ) {händelse. förhindraStandard ( ) ;
konst namn2 = händelse. mål . värde ;
konst välj Händelse2 = ny CustomEvent ( 'linuxhintevent2' , {
detalj : namn2
} ) ;
detta . dispatchEvent ( välj Händelse2 ) ;
}
barn2.html
Den tidigare hanteringsmetoden som skapas i 'js' hanteras baserat på blixtens input i HTML-komponenten.
< mall >< blixt - korttitel = 'Barn 2' >
< div klass = 'slds-m-around_medium' >
< blixt - inmatningsetikett = 'Skriv in text med versaler' vid förändring = { handleChange2 } > blixt - inmatning >
div >
blixt - kort >
mall >
exampleParent.js: Bädda in det här utdraget i din 'js'-fil i klassen.
- Konvertera indata till versaler med funktionen toUpperCase() i handleEvent1() och lagra den i variabeln Information1
- Konvertera indata till gemener med funktionen toLowerCase() i handleEvent2() och lagra den i variabeln Information2.
// Konvertera indata till versaler med toUpperCase()-funktionen
// i handleEvent1() och lagra i variabeln Information1
handleEvent1(event) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@spårinformation2;
// Konvertera indata till gemener med hjälp av toLowerCase()-funktionen
// i handleEvent2() och lagra i variabeln Information2
handleEvent2(event) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Visa nu de två variablerna (Information1 & Information2) i den överordnade HTML-komponenten genom att ange båda de underordnade komponenterna.
< div klass = 'slds-m-around_medium' >
Barn-1 meddelande med versaler: < b > {Information1} < / b >< br >
Barn-2 meddelande med gemener: < b > {Information2} < / b >< br >
< / b >< br >
< / div >
< / blixtkort>
< / mall>
Produktion:
Gå nu till din Salesforce-organisation och placera den överordnade komponenten på sidan 'Record'.
Du kan se att två underordnade komponenter finns i föräldern.
Låt oss skriva lite text i inmatningstexten under komponenten Child 1. Vi kan se att vår text visas med versaler på Parent-komponenten.
Ge lite text i inmatningstexten under komponenten Child 2. Vi kan se att vår text visas med gemener på Parent-komponenten.
Det kan också vara möjligt att skriva in båda texterna samtidigt.
PubSub-modell
När du arbetar med oberoende komponenter (ej relaterade till varandra) och om du vill skicka informationen från en komponent till en annan kan du använda den här modellen. PubSub står för Publicera och Prenumerera. Komponenten som skickar data är känd som utgivaren och komponenten som tar emot data är känd som prenumerant. Det krävs att man använder pubsub-modulen för att skicka händelserna mellan komponenterna. Det är redan fördefinierat och givet av Salesforce. Filnamnet är pubsub. Du måste skapa en LWC-komponent och skriva in denna kod i din javascript-fil som är 'pubsub.js'.
Exempel:
Låt oss skapa två komponenter – Publicera och Prenumerera.
I Publicera låter vi användarna skapa en inmatningstext. När du klickar på knappen tas data emot med versaler och gemener i Prenumerera-komponenten.
publicera.js
Bädda in den här koden i din JSON-fil. Här får vi informationen och publicerar informationen.
Informationsvariabeln kommer att vara versaler och information1 kommer att vara gemener. Se till att du inkluderar denna importsats i början av koden - importera pubsub från 'c/pubsub'.
informationinformation2
// Få informationen med stora och små bokstäver
informationHandler ( händelse ) {
detta . information = händelse. mål . värde ;
detta . information2 = händelse. mål . värde ;
}
// Publicera både informationen (med versaler och gemener)
publishHandler ( ) {
pubsub. publicera ( 'Publicera' , detta . information )
pubsub. publicera ( 'Publicera' , detta . information2 )
}
Det ska se ut så här:
publicera.html
Först skapar vi lightning-ingången för att acceptera texten med hanterarinformationen. Därefter skapas en knapp med onclick-funktionen. Dessa funktioner finns i föregående 'js'-kodavsnitt.
< / blixtkort>
< / mall>
prenumerera.js
Bädda in den här koden i din JSON-fil. Här prenumererar vi först på informationen genom att konvertera den till versaler och gemener separat i metoden callSubscriber(). Efter det anropar vi den här metoden genom metoden connectedcallback() . Se till att du inkluderar denna importsats i början av koden - importera pubsub från 'c/pubsub'.
informationinformation2
// anropar callSubscriber()
ansluten Återuppringning ( ) {
detta . ringa prenumerant ( )
}
// Prenumerera på informationen genom att konvertera till versaler
ringa prenumerant ( ) {
pubsub. prenumerera ( 'Publicera' , ( information ) => {
detta . information = information. till versaler ( ) ;
} ) ,
// Prenumerera på informationen genom att konvertera till gemener
pubsub. prenumerera ( 'Publicera' , ( information2 ) => {
detta . information2 = information2. till LowerCase ( ) ;
} )
}
Det ska se ut så här:
prenumerera.html
Vi visar texten med versaler (lagrade i information) och gemener (lagrade i information2).
< div klass = 'slds-p-around_medium' >
Information mottagen med versaler - < b > {information} < / b >< br >
Information mottagen med gemener - < b > {information2} < / b >
< / div >
< / blixtkort>
< / mall>
Produktion:
Lägg till dessa två komponenter på din sida. Se till att båda komponenterna är på samma sida. Annars fungerar inte funktionen.
Låt oss skriva in lite text i 'Publicera'-komponenten och klicka på knappen 'Skicka data'. Vi kan se att texten tas emot med stora och små bokstäver.
Slutsats
Nu kan vi kommunicera med LWC-komponenterna genom eventkonceptet i Salesforce LWC. Som en del av den här guiden lärde vi oss hur man kommunicerar från föräldern till barnet och från barnet till föräldern. PubSub-modellen används om dina komponenter inte är relaterade till varandra (inte förälder – barn). Varje scenario förklaras med ett enkelt exempel och se till att du inkluderar koden som tillhandahålls i början av den här guiden i 'meta-xml'-filen.