Gebeurtenissen in LWC worden gebruikt om met de componenten te communiceren. Als er gerelateerde onderdelen zijn, kan er van Ouder naar Kind of Kind naar Ouder gecommuniceerd worden. Als er twee niet-gerelateerde componenten zijn, kunnen we communiceren via het PubSub-model (Publish-Subscribe) of met de Lightning Message Service (LMS). In deze handleiding bespreken we hoe u kunt communiceren met gebeurtenissen van ouder tot kind, kind tot ouder en onderling gerelateerde componenten met behulp van het PubSub-model.
U kunt de componenten op uw recordpagina, apppagina of startpagina plaatsen. We zullen dit bestand (meta-xml) niet opnieuw specificeren onder de voorbeeldcodefragmenten:
xml-versie = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiversie > 57,0 apiversie >
< blootgesteld > WAAR blootgesteld >
< doelen >
< doel > bliksem__RecordPagina doel >
< doel > bliksem__AppPagina doel >
< doel > bliksem__HomePagina doel >
doelen >
LightningComponentBundel >
Communicatie tussen ouders en kinderen
Als twee componenten met elkaar verband houden, is deze communicatie mogelijk. Hierbij stuurt de Ouder de gegevens naar het Kind. De bovenliggende component bevat de onderliggende component. Met deze aanpak kunnen we de primitieve gegevens (geheel getal, tekenreeks, Booleaanse waarde, enz.) doorgeven van ouder naar kind, de niet-primitieve gegevens (matrix, object, matrix van objecten, enz.) doorgeven van ouder naar kind, en de gegevens doorgeven aan de component Kind met de actie op de ouder.
Om de Parent-Child-component te communiceren, moeten we de velden, eigenschappen en methoden die beschikbaar zijn in de Child-component openbaar zichtbaar maken. Dit kan mogelijk zijn door de velden, eigendommen en methoden te decoreren met de “api” decorateur.
Voorbeeld : Declareer een variabele met “api” in het bestand “js” van de onderliggende component.
@ API-variabele ;
Nu gebruikt de Parent-component de Child-component in het HTML-bestand via de HTML-attributen.
Voorbeeld : gebruik de variabele in het bovenliggende HTML-bestand.
< C - kind - comp-variabele > C - kind - comp >
Laten we enkele voorbeelden bespreken die beschrijven hoe u met ouder tot kind kunt communiceren.
Voorbeeld 1:
Dit basisvoorbeeld demonstreert het verkrijgen van informatie die door de ouder naar het kind wordt verzonden.
childtComp.js
Eerst maken we een Child-component die de variabele 'informatie' bevat die openbaar beschikbaar is.
// Declareer de variabele als openbaar met behulp van de api Decorator@ API-informatie
U kunt de volledige “js” -code bekijken in de volgende schermafbeelding:
childtComp.html
Nu specificeren we deze variabele in het HTML-bestand binnen de middelste tag.
< sjabloon >< bliksem - kaart titel = 'Kind' >
< centrum >
< B > { informatie } B >
centrum >
bliksem - kaart >
sjabloon >
parentComp.js
We doen niets in het 'js' -bestand.
parentComp.html
Plaats de vorige Child-component in uw Parent-HTML door de publieke variabele (informatie) met wat tekst door te geven.
< sjabloon >< bliksem - kaart titel = 'Ouder' icoon - naam = 'standaard:account' >
< C - kind - comp
informatie = 'Hallo, ik heb informatie ontvangen...'
> C - kind - comp >
bliksem - kaart >
sjabloon >
Uitgang:
Ga nu naar uw Salesforce-organisatie en plaats de bovenliggende component op de pagina “Record”. U zult zien dat de component Kind de informatie van de ouder heeft ontvangen.
Voorbeeld 2:
Laten we twee invoertekstvelden maken die de tekst dynamisch vanuit de gebruikersinterface in de bovenliggende component accepteren. Als we de eerste tekst in de Parent-component invoegen, krijgt de child-component deze tekst in hoofdletters. Op dezelfde manier ontvangt het de tekst in kleine letters als we de tweede tekst invoegen.
childtComp.js
Creëer twee variabelen – informatie1 en informatie2 – met een spoordecorateur.
- Maak de methode convertToUpper() met de “api”-decorator die de eerste invoertekst naar hoofdletters converteert.
- Maak de methode convertToLower() met de “api”-decorator die de tweede invoertekst naar kleine letters converteert.
@ spoorinformatie2 ;
@ api
convertToUpper ( actueleInfo1 ) {
dit . Informatie1 = actueleInfo1. naarHoofdletter ( ) ;
}
@ api
converterennaarlager ( actueleInfo1 ) {
dit . Informatie2 = actueleInfo1. naar kleine letters ( ) ;
}
De volledige “js”-code ziet er als volgt uit:
childtComp.html
We geven de waarden weer (Informatie1 en Informatie2) die afkomstig zijn uit het “js”-bestand.
< sjabloon >< bliksem - kaart titel = 'Kind' >
Hoofdletters :& nbsp ; < B > { Informatie1 } B >< br >
Kleine letters :& nbsp ; < B > { Informatie2 } B >
bliksem - kaart >
sjabloon >
parentComp.js
We maken twee handlermethoden die de onderliggende HTML-sjabloon selecteren via querySelector(). Zorg ervoor dat u de juiste methoden moet doorgeven die de tekst naar hoofdletters of kleine letters converteren.
handleEvent1 ( evenement ) {dit . sjabloon . querySelector ( 'c-childt-comp' ) . convertToUpper ( evenement. doel . waarde ) ;
}
handleEvent2 ( evenement ) {
dit . sjabloon . querySelector ( 'c-childt-comp' ) . converterennaarlager ( evenement. doel . waarde ) ;
}
De volledige “js”-code ziet er als volgt uit:
parentComp.html
Maak een invoertekst met handle-gebeurtenissen voor beide. Plaats de component Kind in deze component Ouder.
< sjabloon >< bliksem - kaart titel = 'Ouder' >
< centrum >
< bliksem - invoerlabel = 'Voer de tekst in kleine letters in' op verandering = { handleEvent1 } > bliksem - invoer >
centrum >
< br >< br >
< centrum >
< bliksem - invoerlabel = 'Voer de tekst in hoofdletters in' op verandering = { handleEvent2 } > bliksem - invoer >
centrum >
< br >< br >< br >
< C - kind - comp > C - kind - comp >
bliksem - kaart >
sjabloon >
Uitgang:
Ga nu naar uw Salesforce-organisatie en plaats de bovenliggende component op de pagina “Record”.
U ziet twee tekstinvoer op de gebruikersinterface.
Laten we wat tekst in de eerste invoer schrijven en u zult zien dat de tekst wordt omgezet in hoofdletters en wordt weergegeven in de component Kind.
Schrijf wat tekst in de tweede invoer en u zult zien dat de tekst wordt omgezet in kleine letters en wordt weergegeven in de component Kind.
Communicatie tussen kinderen en ouders
Net als bij de vorige communicatie moeten beide componenten met elkaar in verband staan om het kind aan de ouder te communiceren. We kunnen het kind op drie verschillende manieren met de ouder communiceren: de ouder naar het kind bellen met behulp van een eenvoudige gebeurtenis en de ouder naar het kind bellen met behulp van een gebeurtenis waarbij de gegevens en gebeurtenissen borrelen. We zullen naar de eenvoudige gebeurtenis in deze gids kijken.
Om het kind met de ouder te kunnen communiceren, moeten we de gebeurtenissen aanmaken en verzenden. Daarvoor moet een aangepast evenement worden aangemaakt. Een evenement op maat is een evenement dat u zelf heeft aangemaakt. We kunnen het maken met het nieuwe trefwoord. De Gebeurtenisnaam kan van alles zijn (het kan een tekenreeks zijn, niet verder dan hoofdletters of cijfers). Voorlopig zullen we de opties niet bespreken.
Syntaxis : new CustomEvent(‘Event_Name’,{options…})
Nu heb je de aangepaste gebeurtenis. De volgende stap is het verzenden van de gebeurtenis. Om de gebeurtenis te verzenden, moeten we de gebeurtenis opgeven die we hebben gemaakt in de methode EventTarget.dispatchEvent().
Syntaxis : this.displatchEvent(new CustomEvent(‘Event_Name’,{options…})
Ten slotte moeten we de gebeurtenis afhandelen. Nu moeten we de onderliggende component in uw oudercomponent aanroepen. Geef uw evenementnaam door door het voorvoegsel 'aan' op te geven aan uw evenementnaam. Hiervoor is de gebeurtenislistenerhandler nodig.
Syntaxis:
< C - kind - component opuwEvenementnaam = { luisteraarHandler } > C - kind - bestanddeel >Voorbeeld:
In dit voorbeeld maken we één Parent-component (exampleParent) en twee Child-componenten.
- In het eerste Kind (exampleChild) maken we een invoertekst waarmee de gebruiker tekst kan invoeren. Dezelfde tekst wordt in hoofdletters weergegeven in de component Parent.
- In het tweede Kind (kind2) creëren we een invoertekst waarmee de gebruiker wat tekst kan invoeren. Dezelfde tekst wordt in kleine letters weergegeven in de component Parent.
voorbeeldChild.js
We maken een handleChange1-methode die de 'linuxhintevent1' CustomEvent maakt met de details als doelwaarde. Daarna verzenden we dit evenement. Sluit het volgende fragment in dit “js”-bestand in.
// handel de gebeurtenis afhandvatWijzigen1 ( evenement ) {
evenement. voorkom standaard ( ) ;
const naam1 = evenement. doel . waarde ;
const selecteerGebeurtenis1 = nieuw Aangepaste gebeurtenis ( 'linuxhintevent1' , {
detail : naam1
} ) ;
dit . verzendingEvent ( selecteerGebeurtenis1 ) ;
}
voorbeeldKind.html
De vorige handle-methode die in “js” is gemaakt, wordt afgehandeld op basis van de blikseminvoer in de HTML-component.
< sjabloon >< bliksem - kaart titel = 'Kind 1' >
< div klas = 'slds-m-rond_medium' >
< bliksem - invoerlabel = 'Tekst in kleine letters invoeren' op verandering = { handvatWijzigen1 } > bliksem - invoer >
div >
bliksem - kaart >
sjabloon >
kind2.js
We creëren een handleChange2-methode die de “linuxhintevent2” CustomEvent creëert met het detail als doelwaarde. Daarna verzenden we dit evenement.
handvatVeranderen2 ( evenement ) {evenement. voorkom standaard ( ) ;
const naam2 = evenement. doel . waarde ;
const selecteerGebeurtenis2 = nieuw Aangepaste gebeurtenis ( 'linuxhintevent2' , {
detail : naam2
} ) ;
dit . verzendingEvent ( selecteerGebeurtenis2 ) ;
}
kind2.html
De vorige handle-methode die in “js” is gemaakt, wordt afgehandeld op basis van de blikseminvoer in de HTML-component.
< sjabloon >< bliksem - kaart titel = 'Kind 2' >
< div klas = 'slds-m-rond_medium' >
< bliksem - invoerlabel = 'Tekst in hoofdletters invoeren' op verandering = { handvatVerander2 } > bliksem - invoer >
div >
bliksem - kaart >
sjabloon >
voorbeeldParent.js: Sluit dit fragment in uw “js”-bestand in de klas in.
- Converteer de invoer naar hoofdletters met behulp van de functie toUpperCase() in handleEvent1() en sla deze op in de variabele Information1
- Converteer de invoer naar kleine letters met behulp van de functie toLowerCase() in handleEvent2() en sla deze op in de variabele Information2.
// Converteer de invoer naar hoofdletters met de functie toUpperCase().
// in de handleEvent1() en opslaan in de Information1-variabele
handleEvent1(gebeurtenis) {
const invoer1 = gebeurtenis.detail;
this.Information1 = input1.toUpperCase();
}
@trackinformatie2;
// Converteer de invoer naar kleine letters met de functie toLowerCase().
// in de handleEvent2() en opslaan in de Information2-variabele
handleEvent2(gebeurtenis) {
const invoer2 = gebeurtenis.detail;
this.Information2 = input2.toLowerCase();
}
voorbeeldOuder.html
Geef nu de twee variabelen (Informatie1 en Informatie2) weer in de Parent HTML-component door beide Child-componenten op te geven.
< div klas = 'slds-m-rond_medium' >
Kind-1 Bericht in hoofdletters: < B > {Informatie1} < / B >< br >
Kind-2 Bericht in kleine letters: < B > {Informatie2} < / B >< br >
< / B >< br >
< / div >
< / bliksem-kaart>
< / sjabloon>
Uitgang:
Ga nu naar uw Salesforce-organisatie en plaats de bovenliggende component op de pagina “Record”.
U kunt zien dat er twee onderliggende componenten bestaan in de Parent.
Laten we wat tekst typen in de invoertekst onder de component Kind 1. We kunnen zien dat onze tekst in hoofdletters wordt weergegeven in de Parent-component.
Geef wat tekst op in de invoertekst onder de component Kind 2. We kunnen zien dat onze tekst in kleine letters wordt weergegeven in de Parent-component.
Het is ook mogelijk om beide teksten tegelijk in te voeren.
PubSub-model
Wanneer u werkt met onafhankelijke componenten (niet gerelateerd aan elkaar) en u de informatie van de ene component naar de andere wilt sturen, kunt u dit model gebruiken. PubSub staat voor Publiceren en Abonneren. Het onderdeel dat de gegevens verzendt, staat bekend als de Uitgever en het onderdeel dat de gegevens ontvangt, staat bekend als de Abonnee. Het is vereist om de pubsub-module te gebruiken om de gebeurtenissen tussen de componenten te verzenden. Het is al vooraf gedefinieerd en gegeven door Salesforce. De bestandsnaam is pubsub. U moet een LWC-component maken en deze code in uw javascript-bestand typen, dat 'pubsub.js' is.
Voorbeeld:
Laten we twee componenten maken: Publiceren en Abonneren.
In Publish laten we de gebruikers een invoertekst maken. Als u op de knop klikt, worden de gegevens in hoofdletters en kleine letters ontvangen in de component Abonneren.
publiceren.js
Sluit deze code in uw JSON-bestand in. Hier krijgen we de informatie en publiceren we de informatie.
De informatievariabele is in hoofdletters en informatie1 in kleine letters. Zorg ervoor dat u deze importinstructie aan het begin van de code opneemt – importeer pubsub uit ‘c/pubsub’.
informatieinformatie2
// Haal de informatie op in hoofdletters en kleine letters
informatieBehandelaar ( evenement ) {
dit . informatie = evenement. doel . waarde ;
dit . informatie2 = evenement. doel . waarde ;
}
// Publiceer beide informatie (in hoofdletters en kleine letters)
publicHandler ( ) {
pubsub. publiceren ( 'Publiceren' , dit . informatie )
pubsub. publiceren ( 'Publiceren' , dit . informatie2 )
}
Het zou er zo uit moeten zien:
publiceren.html
Eerst creëren we de blikseminvoer om de tekst met de handlerinformatie te accepteren. Daarna wordt er één knop aangemaakt met de onclick-functionaliteit. Deze functies bevinden zich in het vorige “js”-codefragment.
< / bliksem-kaart>
< / sjabloon>
abonneer.js
Sluit deze code in uw JSON-bestand in. Hier abonneren we eerst de informatie door deze afzonderlijk in hoofdletters en kleine letters te converteren binnen de callSubscriber() -methode. Daarna roepen we deze methode aan via de connectedcallback() methode. Zorg ervoor dat u deze importinstructie aan het begin van de code opneemt – importeer pubsub uit ‘c/pubsub’.
informatieinformatie2
// de callSubscriber() aanroepen
verbondenTerugbellen ( ) {
dit . belAbonnee ( )
}
// Abonneer de informatie door deze in hoofdletters om te zetten
belAbonnee ( ) {
pubsub. abonneren ( 'Publiceren' , ( informatie ) => {
dit . informatie = informatie. naarHoofdletter ( ) ;
} ) ,
// Abonneer de informatie door deze in kleine letters om te zetten
pubsub. abonneren ( 'Publiceren' , ( informatie2 ) => {
dit . informatie2 = informatie2. naar kleine letters ( ) ;
} )
}
Het zou er zo uit moeten zien:
abonneer.html
We geven de tekst weer in hoofdletters (opgeslagen in informatie) en kleine letters (opgeslagen in informatie2).
< div klas = 'slds-p-rond_medium' >
Informatie ontvangen in hoofdletters - < B > {informatie} < / B >< br >
Informatie ontvangen in kleine letters - < B > {informatie2} < / B >
< / div >
< / bliksem-kaart>
< / sjabloon>
Uitgang:
Voeg deze twee componenten toe aan uw pagina. Zorg ervoor dat beide componenten zich op dezelfde pagina bevinden. Anders werkt de functionaliteit niet.
Laten we wat tekst invoeren in de component “Publiceren” en op de knop “Gegevens verzenden” klikken. We kunnen zien dat de tekst in hoofdletters en kleine letters wordt ontvangen.
Conclusie
Nu kunnen we met de LWC-componenten communiceren via het gebeurtenisconcept in Salesforce LWC. Als onderdeel van deze gids hebben we geleerd hoe we kunnen communiceren van de ouder naar het kind en van het kind naar de ouder. Het PubSub-model wordt gebruikt als uw componenten niet aan elkaar gerelateerd zijn (niet Parent – Child). Elk scenario wordt uitgelegd met een eenvoudig voorbeeld. Zorg ervoor dat u de code die aan het begin van deze handleiding wordt gegeven, opneemt in het “meta-xml”-bestand.