LWC sündmusi kasutatakse komponentidega suhtlemiseks. Seotud komponentide olemasolul võib olla võimalik suhelda vanemalt lapsele või lapselt vanemale. Kui on kaks omavahel mitteseotud komponenti, saame suhelda PubSub (Avalda-telli) mudeli või Lightning Message Service (LMS) kaudu. Selles juhendis arutame, kuidas PubSubi mudelit kasutades suhelda sündmustega vanemalt lapsele, lapselt vanemale ja omavahel seotud komponentidega.
Saate paigutada komponendid oma salvestuslehele, rakenduse lehele või avalehele. Me ei täpsusta seda faili (meta-xml) uuesti näidiskoodilõikude all:
xml versioon = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< isExposed > tõsi isExposed >
< sihtmärgid >
< sihtmärk > välk__RecordPage sihtmärk >
< sihtmärk > lightning__AppPage sihtmärk >
< sihtmärk > välk__Koduleht sihtmärk >
sihtmärgid >
LightningComponent Bundle >
Vanema ja lapse suhtlus
Kui kaks komponenti on omavahel seotud, on see suhtlus võimalik. Siin saadab lapsevanem andmed Lapsele. Ülemkomponent sisaldab alamkomponenti. Selle lähenemisviisi abil saame edastada primitiivsed andmed (täisarv, string, tõeväärtus jne) vanemalt lapsele, mitteprimitiivseid andmeid (massiiv, objekt, objektide massiiv jne) vanemalt lapsele, edastades andmed lapse komponent koos toiminguga vanemal.
Vanemast lapsele edastamiseks peame tegema lapsekomponendis saadaolevad väljad, atribuudid ja meetodid avalikult nähtavaks. See on võimalik, kui kaunistate väljad, omadused ja meetodid 'api' dekoraatoriga.
Näide : deklareerige muutuja alamkomponendi 'js' failis 'api'.
@ api muutuja ;
Nüüd kasutab emakomponent HTML-failis HTML-i atribuutide kaudu komponenti Child.
Näide : kasutage muutujat HTML-vanema failis.
< c - laps - comp muutuja > c - laps - komp >
Arutleme mõne näite üle, mis kirjeldavad vanemalt lapsele suhtlemist.
Näide 1:
See põhinäide demonstreerib teabe saamist, mille vanem saadab lapsele.
childtComp.js
Esiteks loome alamkomponendi, mis sisaldab muutujat 'teave', mis on avalikult saadaval.
// Muutuja avalikuks kuulutamine, kasutades rakendust API Decorator@ api teave
Kogu js-koodi saate vaadata järgmisel ekraanipildil:
childtComp.html
Nüüd määrame selle muutuja HTML-failis keskmise märgendi sees.
< malli >< välk - kaardi pealkiri = 'laps' >
< Keskus >
< b > { teavet } b >
Keskus >
välk - kaardile >
malli >
parentComp.js
Me ei tee failis 'js' midagi.
parentComp.html
Asetage eelmine alamkomponent oma põhi-HTML-i, edastades avaliku muutuja (teabe) koos tekstiga.
< malli >< välk - kaardi pealkiri = 'Vanem' ikooni - nimi = 'standard:konto' >
< c - childt - komp
teavet = 'Tere, sain infot...'
> c - childt - komp >
välk - kaardile >
malli >
Väljund:
Nüüd minge oma Salesforce'i organisatsiooni ja asetage emakomponent lehele „Rekord”. Näete, et lapse komponent sai teabe vanemalt.
Näide 2:
Loome kaks sisendtekstivälja, mis võtavad teksti dünaamiliselt vastu kasutajaliidesest komponendis Parent. Kui sisestame komponendi Parent esimese teksti, saab alamkomponent selle teksti suurtähtedega. Samamoodi saab ta teksti väiketähtedega, kui sisestame teise teksti.
childtComp.js
Loo rajadekoraatoriga kaks muutujat – information1 ja information2.
- Looge meetod convertToUpper() 'api' dekoraatoriga, mis teisendab esimese sisendteksti suurtähtedeks.
- Loo convertToLower() meetod 'api' dekoraatoriga, mis teisendab teise sisendteksti väiketähtedeks.
@ raja teave2 ;
@ api
convertToUpper ( tegelik teave1 ) {
see . Teave1 = tegelik teave1. suurtähtedega ( ) ;
}
@ api
convertToLower ( tegelik teave1 ) {
see . Teave2 = tegelik teave1. väiketähtedega ( ) ;
}
Kogu 'js' kood näeb välja järgmine:
childtComp.html
Kuvame väärtused (Information1 ja Information2), mis pärinevad failist 'js'.
< malli >< välk - kaardi pealkiri = 'laps' >
Suurtähed :& nbsp ; < b > { Teave1 } b >< br >
Väikesed tähed :& nbsp ; < b > { Teave2 } b >
välk - kaardile >
malli >
parentComp.js
Loome kaks töötleja meetodit, mis valivad querySelector() kaudu alam-HTML-malli. Veenduge, et peate edastama õiged meetodid, mis muudavad teksti suur- või väiketähtedeks.
käepideSündmus1 ( sündmus ) {see . malli . querySelector ( 'c-childt-comp' ) . convertToUpper ( sündmus. sihtmärk . väärtus ) ;
}
käepideSündmus2 ( sündmus ) {
see . malli . querySelector ( 'c-childt-comp' ) . convertToLower ( sündmus. sihtmärk . väärtus ) ;
}
Kogu 'js' kood näeb välja järgmine:
parentComp.html
Loo sisendtekst koos käepideme sündmustega mõlema jaoks. Asetage lapskomponent sellesse vanemkomponenti.
< malli >< välk - kaardi pealkiri = 'Vanem' >
< Keskus >
< välk - sisendmärgis = 'Sisestage tekst väiketähtedega' vahelduseks = { käepideSündmus1 } > välk - sisend >
Keskus >
< br >< br >
< Keskus >
< välk - sisendmärgis = 'Sisestage tekst suurtähtedega' vahelduseks = { käepideSündmus2 } > välk - sisend >
Keskus >
< br >< br >< br >
< c - childt - komp > c - childt - komp >
välk - kaardile >
malli >
Väljund:
Nüüd minge oma Salesforce'i organisatsiooni ja asetage emakomponent lehele „Rekord”.
Kasutajaliideses näete kahte tekstisisendit.
Kirjutame esimesse sisendisse teksti ja näete, et tekst muudetakse suurtähtedeks ja kuvatakse komponendis Laps.
Kirjutage teises sisendis teksti ja näete, et tekst muudetakse väiketähtedeks ja kuvatakse komponendis Laps.
Lapse ja vanema suhtlus
Sarnaselt eelmisele suhtlusele peaksid lapse ja vanemaga suhtlemiseks mõlemad komponendid olema üksteisega seotud. Saame lapse vanemale edastada kolmel erineval viisil: vanema kutsumine lapsele lihtsa sündmuse abil ja vanema helistamine lapsele, kasutades sündmust koos andmete ja sündmuste mullimisega. Vaatleme selles juhendis lihtsat sündmust.
Lapse vanemaga suhtlemiseks peame sündmused looma ja saatma. Selleks tuleb luua kohandatud sündmus. Kohandatud sündmus on teie enda loodud sündmus. Saame selle luua uue märksõna abil. Sündmuse_nimi võib olla ükskõik milline (see võib olla string, mis ei ületa suurtähti, või numbrid). Praegu me valikuid ei aruta.
Süntaks : uus kohandatud sündmus('Sündmuse_nimi',{valikud…})
Nüüd on teil kohandatud sündmus. Järgmine samm on sündmuse väljasaatmine. Sündmuse saatmiseks peame määrama sündmuse, mille lõime meetodis EventTarget.dispatchEvent().
Süntaks : this.displatchEvent(new CustomEvent('Sündmuse_nimi',{valikud…})
Lõpuks peame sündmusega hakkama saama. Nüüd peame kutsuma teie emakomponendi alamkomponendi. Edastage oma sündmuse nimi, määrates sündmuse nime eesliide 'sees'. See võtab sündmuste kuulaja töötleja.
Süntaks:
< c - laps - komponent onyourEventName = { kuulajaHandler } > c - laps - komponent >Näide:
Selles näites loome ühe emakomponendi (näideParent) ja kaks alamkomponenti.
- Esimeses lapses (näideLaps) loome sisendteksti, mis võimaldab kasutajal teksti sisestada. Sama tekst kuvatakse komponendis Parent suurtähtedega.
- Teises lapses (child2) loome sisendteksti, mis võimaldab kasutajal teksti sisestada. Sama tekst kuvatakse väiketähtedega komponendis Parent.
näideChild.js
Loome HandChange1 meetodi, mis loob kohandatud sündmuse linuxhintevent1, mille sihtväärtus on üksikasjad. Pärast seda saadame selle sündmuse välja. Manustage sellesse js-faili järgmine katkend.
// halda sündmustkäepideMuuda1 ( sündmus ) {
sündmus. preventDefault ( ) ;
konst nimi1 = sündmus. sihtmärk . väärtus ;
konst valige Sündmus1 = uus Kohandatud sündmus ( 'linuxhintevent1' , {
detail : nimi1
} ) ;
see . dispatchEvent ( valige Sündmus1 ) ;
}
näideLaps.html
Eelmist js-vormingus loodud käepidememeetodit käsitletakse HTML-komponendi välk-sisendi põhjal.
< malli >< välk - kaardi pealkiri = 'Laps 1' >
< div klass = 'slds-m-around_medium' >
< välk - sisendmärgis = 'Sisesta tekst väiketähtedega' vahelduseks = { käepideMuuda1 } > välk - sisend >
div >
välk - kaardile >
malli >
laps2.js
Loome HandChange2 meetodi, mis loob 'linuxhintevent2' CustomEvent, mille sihtväärtus on üksikasjad. Pärast seda saadame selle sündmuse välja.
käepideMuuda2 ( sündmus ) {sündmus. preventDefault ( ) ;
konst nimi2 = sündmus. sihtmärk . väärtus ;
konst valige Sündmus2 = uus Kohandatud sündmus ( 'linuxhintevent2' , {
detail : nimi2
} ) ;
see . dispatchEvent ( valige Sündmus2 ) ;
}
laps2.html
Eelmist js-vormingus loodud käepidememeetodit käsitletakse HTML-komponendi välk-sisendi põhjal.
< malli >< välk - kaardi pealkiri = 'Laps 2' >
< div klass = 'slds-m-around_medium' >
< välk - sisendmärgis = 'Sisesta tekst suurtähtedega' vahelduseks = { käepideMuuda2 } > välk - sisend >
div >
välk - kaardile >
malli >
exampleParent.js: Manustage see koodilõik oma klassis olevasse js-faili.
- Teisendage sisend suurtähtedeks, kasutades käsku handleEvent1() funktsiooni toUpperCase() ja salvestage see muutujas Information1
- Teisendage sisend väiketähtedeks, kasutades HandEvent2() funktsiooni toLowerCase() ja salvestage see muutujas Information2.
// Teisendage sisend suurtähtedeks funktsiooni toUpperCase() abil
// käepidemes Event1() ja salvestada muutujas Information1
handEvent1(sündmus) {
const input1 = sündmus.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Teisendage sisend väiketähtedeks funktsiooni toLowerCase() abil
// käepidemes Event2() ja salvestada muutujas Information2
handEvent2(sündmus) {
const input2 = sündmus.detail;
this.Information2 = input2.to LowerCase();
}
näideVanem.html
Nüüd kuvage kaks muutujat (Teave1 ja Teave2) HTML-i emakomponendis, määrates mõlemad alamkomponendid.
< div klass = 'slds-m-around_medium' >
Laps-1 sõnum suurtähtedega: < b > {Teave1} < / b >< br >
Laps-2 teade väiketähtedega: < b > {Teave2} < / b >< br >
< / b >< br >
< / div >
< / välk-kaart>
< / mall>
Väljund:
Nüüd minge oma Salesforce'i organisatsiooni ja asetage emakomponent lehele „Rekord”.
Näete, et vanemas on kaks alamkomponenti.
Sisestame teksti sisendteksti komponendi Laps 1 alla. Näeme, et meie tekst kuvatakse emakomponendis suurtähtedega.
Sisestage sisendtekstis komponendi Laps 2 alla teksti. Näeme, et meie tekst kuvatakse emakomponendis väiketähtedega.
Samuti võib olla võimalik sisestada mõlemad tekstid korraga.
PubSub mudel
Kui töötate sõltumatute komponentidega (ei ole üksteisega seotud) ja kui soovite saata teavet ühest komponendist teise, saate seda mudelit kasutada. PubSub tähendab Publish and Subscribe. Andmeid saadavat komponenti nimetatakse avaldajaks ja andmeid vastuvõtvat komponenti nimetatakse tellijaks. Komponentide vaheliste sündmuste saatmiseks on vaja kasutada pubsub-moodulit. See on juba eelnevalt määratletud ja Salesforce'i poolt antud. Faili nimi on pubsub. Peate looma LWC komponendi ja sisestama selle koodi oma javascripti faili, mis on 'pubsub.js'.
Näide:
Loome kaks komponenti – Avalda ja Telli.
Avaldamises lubame kasutajatel luua sisendteksti. Nupule klõpsamisel võetakse andmed vastu komponendis Telli suur- ja väiketähtedega.
publish.js
Manustage see kood oma JSON-faili. Siin saame teabe ja avaldame teabe.
Teabemuutuja on suurtähtedega ja teave1 väiketähtedega. Veenduge, et lisate selle impordilause koodi algusesse – importige pubsub saidist „c/pubsub”.
teavetteave2
// Hankige teave suur- ja väiketähtedega
teabekäitleja ( sündmus ) {
see . teavet = sündmus. sihtmärk . väärtus ;
see . teave2 = sündmus. sihtmärk . väärtus ;
}
// Avaldage mõlemad andmed (suur- ja väiketähtedega)
publishHandler ( ) {
pubi. avaldada ( 'Avalda' , see . teavet )
pubi. avaldada ( 'Avalda' , see . teave2 )
}
See peaks välja nägema selline:
publish.html
Esiteks loome välk-sisendi, et aktsepteerida teksti koos töötleja teabega. Pärast seda luuakse üks nupp onclick funktsiooniga. Need funktsioonid on eelmises js-koodilõigus.
< / välk-kaart>
< / mall>
subscribe.js
Manustage see kood oma JSON-faili. Siin tellime esmalt teabe, teisendades selle meetodi callSubscriber() sees eraldi suur- ja väiketähtedeks. Pärast seda käivitame selle meetodi Connectcallback() meetodi kaudu. Veenduge, et lisate selle impordilause koodi algusesse – importige pubsub saidist „c/pubsub”.
teavetteave2
// kutsudes välja callSubscriber()
ühendatud tagasihelistamine ( ) {
see . helista Abonent ( )
}
// Telli teave, teisendades suurtähtedeks
helista Abonent ( ) {
pubi. tellida ( 'Avalda' , ( teavet ) => {
see . teavet = teavet. suurtähtedega ( ) ;
} ) ,
// Telli teave, teisendades väiketähtedeks
pubi. tellida ( 'Avalda' , ( teave2 ) => {
see . teave2 = teave2. väiketähtedega ( ) ;
} )
}
See peaks välja nägema selline:
subscribe.html
Teksti kuvame suurtähtedega (salvestatud teabesse) ja väiketähtedega (salvestatud teabesse2).
< div klass = 'slds-p-around_medium' >
Suurtähtedega saadud teave - < b > {informatsioon} < / b >< br >
Väiketähtedega saadud teave - < b > {teave2} < / b >
< / div >
< / välk-kaart>
< / mall>
Väljund:
Lisage need kaks komponenti oma lehele. Veenduge, et mõlemad komponendid oleksid samal lehel. Vastasel juhul funktsioon ei tööta.
Sisestame komponendi 'Avalda' teksti ja klõpsake nuppu 'Saada andmeid'. Näeme, et tekst võetakse vastu suur- ja väiketähtedega.
Järeldus
Nüüd saame LWC komponentidega suhelda Salesforce LWC sündmuste kontseptsiooni kaudu. Selle juhendi raames õppisime, kuidas suhelda vanemalt lapsele ja lapselt vanemale. PubSub mudelit kasutatakse juhul, kui teie komponendid ei ole üksteisega seotud (mitte vanem-laps). Iga stsenaariumit selgitatakse lihtsa näitega ja veenduge, et lisate selle juhendi alguses antud koodi meta-xml-faili.