Evenimentele din LWC sunt folosite pentru a comunica cu componentele. Dacă există componente înrudite, poate fi posibilă comunicarea de la părinte la copil sau de la copil la părinte. Dacă există două componente care nu au legătură, putem comunica prin modelul PubSub (Publish-Subscribe) sau cu Lightning Message Service (LMS). În acest ghid, vom discuta despre cum să comunicăm cu evenimentele de la părinte la copil, de la copil la părinte și despre componentele interconectate folosind modelul PubSub.
Puteți plasa componentele în Pagina de înregistrare, Pagina de aplicație sau Pagina de pornire. Nu vom specifica acest fișier (meta-xml) din nou sub exemplele de fragmente de cod:
versiunea xml = „1.0” ?>
< LightningComponentBundle xmlns = „http://soap.sforce.com/2006/04/metadata” >
< apiVersion > 57,0 apiVersion >
< este Expus > Adevărat este Expus >
< tinte >
< ţintă > fulger__RecordPage ţintă >
< ţintă > lightning__AppPage ţintă >
< ţintă > lightning__HomePage ţintă >
tinte >
LightningComponentBundle >
Comunicarea părinte-copil
Dacă două componente sunt legate între ele, această comunicare este posibilă. Aici, Părintele trimite datele Copilului. Componenta părinte deține componenta Child. Cu această abordare, putem trece datele Primitive (Integer, String, Boolean etc.) de la Parent la Child, transmitem datele Non-Primitive (Array, Object, Array of Objects, etc) de la Parent la Child, pasând datele către componenta Copil cu acţiunea asupra Părintelui.
Pentru a comunica părintele cu copilul, trebuie să facem vizibile public câmpurile, proprietățile și metodele disponibile în componenta Copil. Acest lucru poate fi posibil prin decorarea câmpurilor, proprietăților și metodelor cu decoratorul „api”.
Exemplu : Declarați o variabilă cu „api” în fișierul „js” al componentei Child.
@ variabilă api ;
Acum, componenta Parent folosește componenta Child în fișierul HTML prin atributele HTML.
Exemplu : Folosiți variabila din fișierul HTML părinte.
< c - copil - variabila comp > c - copil - comp >
Să discutăm câteva exemple care descriu cum să comunici cu părintele cu copil.
Exemplul 1:
Acest exemplu de bază demonstrează obținerea unei informații care este trimisă de părinte copilului.
childtComp.js
În primul rând, creăm o componentă Child care deține variabila „informații” care este disponibilă publicului.
// Declarați variabila ca publică folosind api Decorator@ informații API
Puteți vizualiza întregul cod „js” în următoarea captură de ecran:
childtComp.html
Acum, specificăm această variabilă în fișierul HTML din eticheta centrală.
< șablon >< fulger - titlul cardului = 'Copil' >
< centru >
< b > { informație } b >
centru >
fulger - card >
șablon >
parentComp.js
Nu facem nimic în fișierul „js”.
parentComp.html
Plasați componenta anterioară Child în HTML-ul părinte prin trecerea variabilei publice (informații) cu ceva text.
< șablon >< fulger - titlul cardului = 'Mamă' pictograma - Nume = „standard:cont” >
< c - copil - comp
informație = 'Bună ziua, am primit informații...'
> c - copil - comp >
fulger - card >
șablon >
Ieșire:
Acum, accesați organizația dvs. Salesforce și plasați componenta Părinte pe pagina „Înregistrare”. Veți vedea că componenta Copil a primit informațiile de la Părinte.
Exemplul 2:
Să creăm două câmpuri de text de intrare care vor accepta textul în mod dinamic din interfața de utilizare în componenta Părinte. Dacă introducem primul text în componenta Părinte, componenta copil primește acest text cu majuscule. În mod similar, primește textul cu litere mici dacă inserăm al doilea text.
childtComp.js
Creați două variabile – informații1 și informații2 – cu un decorator de piste.
- Creați metoda convertToUpper() cu decoratorul „api” care convertește primul text introdus în majuscule.
- Creați metoda convertToLower() cu decoratorul „api” care convertește al doilea text de intrare în litere mici.
@ Informații de urmărire2 ;
@ api
convertToUpper ( actualInfo1 ) {
acest . Informații 1 = actualInfo1. laMajuscule ( ) ;
}
@ api
convertToLower ( actualInfo1 ) {
acest . Informații2 = actualInfo1. toLowerCase ( ) ;
}
Întregul cod „js” arată astfel:
childtComp.html
Afișăm valorile (Information1 și Information2) care provin din fișierul „js”.
< șablon >< fulger - titlul cardului = 'Copil' >
Majuscule :& nbsp ; < b > { Informații 1 } b >< br >
Literă mică :& nbsp ; < b > { Informații2 } b >
fulger - card >
șablon >
parentComp.js
Creăm două metode de gestionare care selectează șablonul HTML copil prin querySelector(). Asigurați-vă că trebuie să treceți metodele corecte care convertesc textul în litere mari sau mici.
handleEvent1 ( eveniment ) {acest . șablon . querySelector ( „c-childt-comp” ) . convertToUpper ( eveniment. ţintă . valoare ) ;
}
handleEvent2 ( eveniment ) {
acest . șablon . querySelector ( „c-childt-comp” ) . convertToLower ( eveniment. ţintă . valoare ) ;
}
Întregul cod „js” arată astfel:
parentComp.html
Creați un text de intrare cu evenimente de mâner pentru ambele. Plasați componenta Child în această componentă Parent.
< șablon >< fulger - titlul cardului = 'Mamă' >
< centru >
< fulger - eticheta de intrare = „Introduceți textul cu litere mici” cu privire la schimbările = { handleEvent1 } > fulger - intrare >
centru >
< br >< br >
< centru >
< fulger - eticheta de intrare = „Introduceți textul cu majuscule” cu privire la schimbările = { handleEvent2 } > fulger - intrare >
centru >
< br >< br >< br >
< c - copil - comp > c - copil - comp >
fulger - card >
șablon >
Ieșire:
Acum, accesați organizația dvs. Salesforce și plasați componenta Părinte pe pagina „Înregistrare”.
Veți vedea două intrări de text în interfața de utilizare.
Să scriem ceva text în prima intrare și veți vedea că textul este convertit în majuscule și este afișat în componenta Child.
Scrieți ceva text în a doua intrare și veți vedea că textul este convertit în litere mici și este afișat în componenta Child.
Comunicarea copil-părinte
Similar cu comunicarea anterioară, pentru a comunica Copilul Părintelui, ambele componente ar trebui să aibă legătură una cu cealaltă. Putem comunica Copilul Părintelui în trei abordări diferite: chemarea Părintelui către Copil folosind un eveniment simplu și chemarea Părintelui către Copil folosind un eveniment cu datele și evenimentul care bule. Ne vom uita la evenimentul simplu din acest ghid.
Pentru a comunica Copilul Părintelui, trebuie să creăm și să trimitem evenimentele. Pentru asta, trebuie creat un eveniment personalizat. Un eveniment personalizat este un eveniment creat de dvs. Îl putem crea folosind noul cuvânt cheie. Event_Name poate fi orice (poate fi un șir, nu dincolo de majuscule, sau cifre). Deocamdată, nu vom discuta opțiunile.
Sintaxă : new CustomEvent(‘Nume_Eveniment’,{opțiuni…})
Acum, aveți evenimentul personalizat. Următorul pas este expedierea evenimentului. Pentru a trimite evenimentul, trebuie să specificăm evenimentul pe care l-am creat în metoda EventTarget.dispatchEvent().
Sintaxă : this.displatchEvent(new CustomEvent(‘Nume_Eveniment’,{opțiuni…})
În cele din urmă, trebuie să ne ocupăm de eveniment. Acum, trebuie să apelăm componenta copil din componenta părinte. Transmite numele evenimentului specificând prefixul „pornit” la numele evenimentului. Aceasta ia handler-ul de ascultare a evenimentelor.
Sintaxă:
< c - copil - componenta de pe numeEvent = { ascultătorHandler } > c - copil - componentă >Exemplu:
În acest exemplu, creăm o componentă Parent (exampleParent) și două componente Child.
- În primul copil (exampleChild), creăm un text de intrare care permite utilizatorului să furnizeze ceva text. Același text este afișat în componenta Părinte cu majuscule.
- În al doilea Child (child2), creăm un text de intrare care permite utilizatorului să furnizeze ceva text. Același text este afișat în componenta Părinte cu litere mici.
exampleChild.js
Creăm o metodă handleChange1 care creează „linuxhintevent1” CustomEvent cu detaliul ca valoare țintă. După aceea, trimitem acest eveniment. Încorporați următorul fragment în acest fișier „js”.
// se ocupă de evenimenthandleChange1 ( eveniment ) {
eveniment. preventDefault ( ) ;
const nume1 = eveniment. ţintă . valoare ;
const selectEvent1 = nou Eveniment personalizat ( „linuxhintevent1” , {
detaliu : nume1
} ) ;
acest . dispatchEvent ( selectEvent1 ) ;
}
exampleChild.html
Metoda anterioară de handle care este creată în „js” este gestionată pe baza intrării fulger în componenta HTML.
< șablon >< fulger - titlul cardului = „Copilul 1” >
< div clasă = „slds-m-around_medium” >
< fulger - etichetă de introducere = „Introduceți textul cu litere mici” cu privire la schimbările = { handleChange1 } > fulger - intrare >
div >
fulger - card >
șablon >
copil2.js
Creăm o metodă handleChange2 care creează „linuxhintevent2” CustomEvent cu detaliul ca valoare țintă. După aceea, trimitem acest eveniment.
handleChange2 ( eveniment ) {eveniment. preventDefault ( ) ;
const nume2 = eveniment. ţintă . valoare ;
const selectEvent2 = nou Eveniment personalizat ( „linuxhintevent2” , {
detaliu : nume2
} ) ;
acest . dispatchEvent ( selectEvent2 ) ;
}
copil2.html
Metoda anterioară de handle care este creată în „js” este gestionată pe baza intrării fulger în componenta HTML.
< șablon >< fulger - titlul cardului = „Copilul 2” >
< div clasă = „slds-m-around_medium” >
< fulger - etichetă de introducere = „Introduceți textul cu majuscule” cu privire la schimbările = { handleChange2 } > fulger - intrare >
div >
fulger - card >
șablon >
exampleParent.js: Încorporați acest fragment în fișierul „js” din cadrul clasei.
- Convertiți intrarea în majuscule folosind funcția toUpperCase() din handleEvent1() și stocați-o în variabila Information1
- Convertiți intrarea în minuscule folosind funcția toLowerCase() din handleEvent2() și stocați-o în variabila Information2.
// Convertiți intrarea în majuscule folosind funcția toUpperCase().
// în handleEvent1() și stocați în variabila Information1
handleEvent1(eveniment) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Convertiți intrarea în minuscule folosind funcția toLowerCase().
// în handleEvent2() și stocați în variabila Information2
handleEvent2(eveniment) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Acum, afișați cele două variabile (Information1 & Information2) în componenta HTML părinte specificând ambele componente Child.
<șablon>< div clasă = „slds-m-around_medium” >
Mesaj Child-1 în majuscule: < b > {Informații1} < / b >< br >
Mesaj Child-2 cu litere mici: < b > {Informații2} < / b >< br >
< / b >< br >
< / div >
< / carte-fulger>
< / șablon>
Ieșire:
Acum, accesați organizația dvs. Salesforce și plasați componenta Părinte pe pagina „Înregistrare”.
Puteți vedea că două componente Child există în Parent.
Să introducem ceva text în textul de intrare sub componenta Child 1. Putem vedea că textul nostru este afișat cu majuscule pe componenta Părinte.
Dați ceva text în textul introdus sub componenta Child 2. Putem vedea că textul nostru este afișat cu litere mici pe componenta Părinte.
De asemenea, poate fi posibil să introduceți ambele texte simultan.
Modelul PubSub
Când lucrați cu componente independente (care nu au legătură între ele) și dacă doriți să trimiteți informațiile de la o componentă la alta, puteți utiliza acest model. PubSub înseamnă Publicare și Abonare. Componenta care trimite datele este cunoscută sub numele de Editor, iar componenta care primește datele este cunoscută ca Abonat. Este necesar să folosiți modulul pubsub pentru a trimite evenimentele între componente. Este deja predefinit și dat de Salesforce. Numele fișierului este pubsub. Trebuie să creați o componentă LWC și să introduceți acest cod în fișierul javascript care este „pubsub.js”.
Exemplu:
Să creăm două componente – Publicare și Abonare.
În Publicare, le permitem utilizatorilor să creeze un text de intrare. Făcând clic pe butonul, datele sunt primite cu litere mari și mici în componenta Abonare.
publish.js
Încorporați acest cod în fișierul dvs. JSON. Aici, obținem informațiile și publicăm informațiile.
Variabila de informare va fi cu majuscule, iar informația1 va fi cu litere mici. Asigurați-vă că includeți această declarație de import la începutul codului – import pubsub din „c/pubsub”.
informațieinformatii 2
// Obțineți informațiile cu litere mari și mici
manipulator de informații ( eveniment ) {
acest . informație = eveniment. ţintă . valoare ;
acest . informatii 2 = eveniment. ţintă . valoare ;
}
// Publicați ambele informații (în majuscule și litere mici)
publishHandler ( ) {
pubsub. publica ( 'Publica' , acest . informație )
pubsub. publica ( 'Publica' , acest . informatii 2 )
}
Ar trebui să arate așa:
publish.html
În primul rând, creăm intrarea fulger pentru a accepta textul cu informațiile de gestionare. După aceea, este creat un buton cu funcționalitatea onclick. Aceste funcții se află în fragmentul de cod „js” anterior.
<șablon>< / carte-fulger>
< / șablon>
abonați-vă.js
Încorporați acest cod în fișierul dvs. JSON. Aici, mai întâi abonăm informațiile transformându-le în majuscule și litere mici separat în cadrul metodei callSubscriber(). După aceea, invocăm această metodă prin metoda connectedcallback(). Asigurați-vă că includeți această declarație de import la începutul codului – import pubsub din „c/pubsub”.
informațieinformatii 2
// invocând callSubscriber()
conectatCallback ( ) {
acest . apelați abonatul ( )
}
// Abonați informațiile prin conversia în majuscule
apelați abonatul ( ) {
pubsub. Abonati-va ( 'Publica' , ( informație ) => {
acest . informație = informație. laMajuscule ( ) ;
} ) ,
// Abonați informațiile prin conversia în litere mici
pubsub. Abonati-va ( 'Publica' , ( informatii 2 ) => {
acest . informatii 2 = informatii 2. toLowerCase ( ) ;
} )
}
Ar trebui să arate așa:
subscribe.html
Afișăm textul în majuscule (stocat în informații) și litere mici (stocat în informații2).
<șablon>< div clasă = „slds-p-around_medium” >
Informații primite cu majuscule - < b > {informație} < / b >< br >
Informații primite cu litere mici - < b > {informații2} < / b >
< / div >
< / carte-fulger>
< / șablon>
Ieșire:
Adăugați aceste două componente la pagina dvs. Asigurați-vă că ambele componente sunt pe aceeași pagină. În caz contrar, funcționalitatea nu va funcționa.
Să introducem ceva text în componenta „Publicare” și să facem clic pe butonul „Trimite date”. Putem observa că textul este primit cu litere mari și mici.
Concluzie
Acum, putem comunica cu componentele LWC prin conceptul de eveniment din Salesforce LWC. Ca parte a acestui ghid, am învățat cum să comunicăm de la părinte la copil și de la copil la părinte. Modelul PubSub este folosit în cazul în care componentele dumneavoastră nu sunt legate între ele (nu Părinte – Copil). Fiecare scenariu este explicat cu un exemplu simplu și asigurați-vă că includeți codul furnizat la începutul acestui ghid în fișierul „meta-xml”.