Dogodki v LWC se uporabljajo za komunikacijo s komponentami. Če obstajajo povezane komponente, je mogoče komunicirati od starša do otroka ali otroka do starša. Če obstajata dve nepovezani komponenti, lahko komuniciramo prek modela PubSub (Publish-Subscribe) ali s storitvijo Lightning Message Service (LMS). V tem priročniku bomo razpravljali o tem, kako komunicirati z dogodki od starša do otroka, otroka do starša in medsebojno povezanih komponent z uporabo modela PubSub.
Komponente lahko postavite na svojo stran za snemanje, stran aplikacije ali domačo stran. Te datoteke (meta-xml) ne bomo ponovno navedli pod vzorčnimi delčki kode:
xml različico = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< isExposed > prav isExposed >
< tarče >
< tarča > strela__RecordPage tarča >
< tarča > lightning__AppPage tarča >
< tarča > strela__Domača stran tarča >
tarče >
LightningComponentBundle >
Komunikacija med staršem in otrokom
Če sta dve komponenti med seboj povezani, je ta komunikacija mogoča. Tu starš pošlje podatke otroku. Nadrejena komponenta vsebuje podrejeno komponento. S tem pristopom lahko posredujemo primitivne podatke (celo število, niz, logično vrednost itd.) od nadrejenega k podrejenemu, posredujemo neprimitivne podatke (matrika, predmet, niz predmetov itd.) od nadrejenega k podrejenemu, pri čemer podatke posredujemo do komponenta Child z dejanjem na Parent.
Za sporočanje starša otroku moramo polja, lastnosti in metode, ki so na voljo v komponenti Child, narediti javno vidne. To je mogoče z okrasitvijo polj, lastnosti in metod z dekoratorjem »api«.
Primer : Deklarirajte spremenljivko z »api« v datoteki podrejene komponente »js«.
@ api spremenljivka ;
Zdaj komponenta Parent uporablja komponento Child v datoteki HTML prek atributov HTML.
Primer : Uporabite spremenljivko v nadrejeni datoteki HTML.
< c - otrok - komp spremenljivka > c - otrok - komp >
Oglejmo si nekaj primerov, ki opisujejo, kako komunicirati med staršem in otrokom.
Primer 1:
Ta osnovni primer prikazuje pridobivanje informacij, ki jih starš pošlje otroku.
childtComp.js
Najprej ustvarimo komponento Child, ki vsebuje spremenljivko 'informacije', ki je javno dostopna.
// Deklarirajte spremenljivko kot javno z uporabo dekoraterja api@ api informacije
Celotno kodo »js« si lahko ogledate na naslednjem posnetku zaslona:
childtComp.html
Sedaj določimo to spremenljivko v datoteki HTML znotraj sredinske oznake.
< predlogo >< strela - naslov kartice = 'otrok' >
< center >
< b > { informacije } b >
center >
strela - kartica >
predlogo >
parentComp.js
V datoteki »js« ne delamo ničesar.
parentComp.html
Prejšnjo podrejeno komponento postavite v svoj nadrejeni HTML tako, da posredujete javno spremenljivko (informacije) z nekaj besedila.
< predlogo >< strela - naslov kartice = 'starš' ikona - ime = 'standard:račun' >
< c - otrokt - komp
informacije = 'Pozdravljeni, prejel sem informacijo ...'
> c - otrokt - komp >
strela - kartica >
predlogo >
Izhod:
Zdaj pojdite v svojo organizacijo Salesforce in postavite nadrejeno komponento na stran »Zapis«. Videli boste, da je podrejena komponenta prejela informacije od nadrejenega.
Primer 2:
Ustvarimo dve vnosni besedilni polji, ki bosta dinamično sprejeli besedilo iz uporabniškega vmesnika v nadrejeni komponenti. Če v nadrejeno komponento vstavimo prvo besedilo, podrejena komponenta prejme to besedilo z velikimi črkami. Podobno prejme besedilo z malimi črkami, če vstavimo drugo besedilo.
childtComp.js
Ustvarite dve spremenljivki – informacije1 in informacije2 – z dekoratorjem sledi.
- Ustvarite metodo convertToUpper() z dekoratorjem »api«, ki prvo vneseno besedilo pretvori v velike črke.
- Ustvarite metodo convertToLower() z dekoratorjem »api«, ki pretvori drugo vhodno besedilo v male črke.
@ informacije o skladbi2 ;
@ api
convertToUpper ( actualInfo1 ) {
to . Informacije1 = actualInfo1. toUpperCase ( ) ;
}
@ api
convertToLower ( actualInfo1 ) {
to . Informacije2 = actualInfo1. toLowerCase ( ) ;
}
Celotna koda »js« izgleda takole:
childtComp.html
Prikažemo vrednosti (Information1 in Information2), ki prihajajo iz datoteke 'js'.
< predlogo >< strela - naslov kartice = 'otrok' >
Velike črke :& nbsp ; < b > { Informacije1 } b >< št >
Male črke :& nbsp ; < b > { Informacije2 } b >
strela - kartica >
predlogo >
parentComp.js
Ustvarimo dve metodi za obravnavo, ki prek querySelector() izbereta podrejeno predlogo HTML. Prepričajte se, da morate posredovati pravilne metode, ki pretvorijo besedilo v velike ali male črke.
handleEvent1 ( dogodek ) {to . predlogo . querySelector ( 'c-childt-comp' ) . convertToUpper ( dogodek. tarča . vrednost ) ;
}
handleEvent2 ( dogodek ) {
to . predlogo . querySelector ( 'c-childt-comp' ) . convertToLower ( dogodek. tarča . vrednost ) ;
}
Celotna koda »js« izgleda takole:
parentComp.html
Ustvarite vhodno besedilo z obravnavanimi dogodki za oba. Postavite podrejeno komponento v to nadrejeno komponento.
< predlogo >< strela - naslov kartice = 'starš' >
< center >
< strela - vhodna oznaka = 'Vnesite besedilo z malimi črkami' onchange = { handleEvent1 } > strela - vnos >
center >
< št >< št >
< center >
< strela - vhodna oznaka = 'Vnesite besedilo z velikimi črkami' onchange = { handleEvent2 } > strela - vnos >
center >
< št >< št >< št >
< c - otrokt - komp > c - otrokt - komp >
strela - kartica >
predlogo >
Izhod:
Zdaj pojdite v svojo Salesforce Org in postavite nadrejeno komponento na stran »Record«.
V uporabniškem vmesniku boste videli dva vnosa besedila.
Napišimo nekaj besedila v prvi vnos in videli boste, da je besedilo pretvorjeno v velike črke in prikazano v komponenti Child.
Napišite nekaj besedila v drugi vnos in videli boste, da je besedilo pretvorjeno v male črke in prikazano v komponenti Child.
Komunikacija otrok s starši
Podobno kot pri prejšnji komunikaciji, da bi otrok komuniciral s staršem, morata biti obe komponenti med seboj povezani. Otroka staršu lahko sporočimo na tri različne pristope: pokličemo starša otroku s preprostim dogodkom in pokličemo starša otroku z uporabo dogodka z mehurčki podatkov in dogodkov. V tem vodniku si bomo ogledali preprost dogodek.
Da bi otroka sporočili staršu, moramo ustvariti in odpošiljati dogodke. Za to je treba ustvariti dogodek po meri. Dogodek po meri je dogodek, ki ga ustvarite sami. Ustvarimo ga lahko z novo ključno besedo. Ime_dogodka je lahko karkoli (lahko je niz, ki ne presega velikih črk, ali števke). Za zdaj ne bomo razpravljali o možnostih.
Sintaksa : nov CustomEvent('Ime_dogodka',{možnosti…})
Zdaj imate dogodek po meri. Naslednji korak je pošiljanje dogodka. Za pošiljanje dogodka moramo podati dogodek, ki smo ga ustvarili v metodi EventTarget.dispatchEvent().
Sintaksa : this.displatchEvent(new CustomEvent(‘Event_Name’,{options…})
Končno moramo obravnavati dogodek. Zdaj moramo poklicati podrejeno komponento v vaši nadrejeni komponenti. Posredujte ime dogodka tako, da imenu dogodka vnesete predpono »on«. To zahteva obravnavo poslušalca dogodkov.
Sintaksa:
< c - otrok - komponenta onyourEventName = { listenerHandler } > c - otrok - komponento >primer:
V tem primeru ustvarimo eno nadrejeno komponento (exampleParent) in dve podrejeni komponenti.
- V prvem otroku (exampleChild) ustvarimo vhodno besedilo, ki uporabniku omogoča vnos besedila. Enako besedilo je prikazano v Nadrejeni komponenti z velikimi črkami.
- V drugem Otroku (child2) ustvarimo vhodno besedilo, ki uporabniku omogoča vnos besedila. Enako besedilo je prikazano v Nadrejeni komponenti z malimi črkami.
exampleChild.js
Ustvarimo metodo handleChange1, ki ustvari CustomEvent »linuxhintevent1« s podrobnostmi kot ciljno vrednostjo. Po tem odpošljemo ta dogodek. V to datoteko »js« vdelajte naslednji delček.
// obravnava dogodekhandleChange1 ( dogodek ) {
dogodek. preprečiti privzeto ( ) ;
konst ime1 = dogodek. tarča . vrednost ;
konst izberiteDogodek1 = novo CustomEvent ( 'linuxhintevent1' , {
detajl : ime1
} ) ;
to . dispatchEvent ( izberiteDogodek1 ) ;
}
exampleChild.html
Prejšnja metoda ročaja, ustvarjena v »js«, se obravnava na podlagi vnosa strele v komponenti HTML.
< predlogo >< strela - naslov kartice = 'Otrok 1' >
< div razred = 'slds-m-around_medium' >
< strela - oznaka vnosa = 'Vnesite besedilo z malimi črkami' onchange = { handleChange1 } > strela - vnos >
div >
strela - kartica >
predlogo >
otrok2.js
Ustvarimo metodo handleChange2, ki ustvari »linuxhintevent2« CustomEvent s podrobnostjo kot ciljno vrednostjo. Po tem odpošljemo ta dogodek.
handleChange2 ( dogodek ) {dogodek. preprečiti privzeto ( ) ;
konst ime2 = dogodek. tarča . vrednost ;
konst izberiteDogodek2 = novo CustomEvent ( 'linuxhintevent2' , {
detajl : ime2
} ) ;
to . dispatchEvent ( izberiteDogodek2 ) ;
}
otrok2.html
Prejšnja metoda ročaja, ustvarjena v »js«, se obravnava na podlagi vnosa strele v komponenti HTML.
< predlogo >< strela - naslov kartice = 'Otrok 2' >
< div razred = 'slds-m-around_medium' >
< strela - oznaka vnosa = 'Vnesite besedilo z velikimi črkami' onchange = { handleChange2 } > strela - vnos >
div >
strela - kartica >
predlogo >
exampleParent.js: Ta delček vdelajte v datoteko »js« znotraj razreda.
- Pretvorite vnos v velike črke s funkcijo toUpperCase() v handleEvent1() in ga shranite v spremenljivko Information1
- Pretvorite vnos v male črke s funkcijo toLowerCase() v handleEvent2() in ga shranite v spremenljivko Information2.
// Pretvori vnos v velike črke s funkcijo toUpperCase().
// v handleEvent1() in shrani v spremenljivko Information1
handleEvent1(dogodek) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Pretvori vnos v male črke s funkcijo toLowerCase().
// v handleEvent2() in shrani v spremenljivko Information2
handleEvent2(dogodek) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Zdaj prikažite dve spremenljivki (Information1 & Information2) v nadrejeni komponenti HTML tako, da navedete obe podrejeni komponenti.
< div razred = 'slds-m-around_medium' >
Child-1 sporočilo z velikimi črkami: < b > {Informacije1} < / b >< št >
Child-2 sporočilo z malimi črkami: < b > {Informacije2} < / b >< št >
< / b >< št >
< / div >
< / strela-kartica>
< / predloga>
Izhod:
Zdaj pojdite v svojo Salesforce Org in postavite nadrejeno komponento na stran »Record«.
Vidite lahko, da v nadrejenem elementu obstajata dve podrejeni komponenti.
Vtipkajmo nekaj besedila v vhodno besedilo pod komponento Child 1. Vidimo lahko, da je naše besedilo na komponenti Parent prikazano z velikimi črkami.
Podajte nekaj besedila v vhodnem besedilu pod komponento Child 2. Vidimo lahko, da je naše besedilo prikazano z malimi črkami na komponenti Parent.
Prav tako je mogoče vnesti obe besedili hkrati.
Model PubSub
Ko delate z neodvisnimi komponentami (ki niso povezane med seboj) in če želite poslati informacije iz ene komponente v drugo, lahko uporabite ta model. PubSub pomeni objavo in naročanje. Komponenta, ki pošilja podatke, je znana kot izdajatelj, komponenta, ki prejema podatke, pa je znana kot naročnik. Za pošiljanje dogodkov med komponentami je potrebna uporaba modula pubsub. To je že vnaprej določeno in podano s strani Salesforce. Ime datoteke je pubsub. Ustvariti morate komponento LWC in vnesti to kodo v datoteko javascript, ki je »pubsub.js«.
primer:
Ustvarimo dve komponenti – Objavi in Naroči se.
V Publishu uporabnikom omogočamo ustvarjanje vnosnega besedila. S klikom na gumb se v komponenti Naroči podatke prevzame z velikimi in malimi črkami.
objavi.js
Vdelajte to kodo v datoteko JSON. Tukaj dobimo informacije in jih objavimo.
Spremenljivka informacije bo z velikimi črkami, informacija1 pa z malimi črkami. Prepričajte se, da ste vključili to uvozno izjavo na začetku kode – uvozite pubsub iz »c/pubsub«.
informacijeinformacije2
// Pridobite informacije z velikimi in malimi črkami
informationHandler ( dogodek ) {
to . informacije = dogodek. tarča . vrednost ;
to . informacije2 = dogodek. tarča . vrednost ;
}
// Objavi informacije (z velikimi in malimi črkami)
publishHandler ( ) {
pubsub. objaviti ( 'Objavi' , to . informacije )
pubsub. objaviti ( 'Objavi' , to . informacije2 )
}
Moralo bi izgledati takole:
objavi.html
Najprej ustvarimo strelni vnos za sprejem besedila z informacijami o upravljalniku. Po tem se ustvari en gumb s funkcijo onclick. Te funkcije so v prejšnjem delčku kode »js«.
< / strela-kartica>
< / predloga>
subscribe.js
Vdelajte to kodo v datoteko JSON. Tukaj najprej naročimo informacije tako, da jih ločeno pretvorimo v velike in male črke znotraj metode callSubscriber(). Po tem prikličemo to metodo prek metodeconnectedcallback(). Prepričajte se, da ste vključili to uvozno izjavo na začetku kode – uvozite pubsub iz »c/pubsub«.
informacijeinformacije2
// priklic callSubscriber()
povezan Povratni klic ( ) {
to . callSubscriber ( )
}
// Naročite informacije s pretvorbo v velike črke
callSubscriber ( ) {
pubsub. naročite se ( 'Objavi' , ( informacije ) => {
to . informacije = informacije. toUpperCase ( ) ;
} ) ,
// Naročite informacije s pretvorbo v male črke
pubsub. naročite se ( 'Objavi' , ( informacije2 ) => {
to . informacije2 = informacije2. toLowerCase ( ) ;
} )
}
Videti bi moralo takole:
subscribe.html
Besedilo prikažemo z velikimi (shranjeno v informaciji) in malimi črkami (shranjeno v informaciji2).
< div razred = 'slds-p-around_medium' >
Informacije, prejete z velikimi črkami - < b > {informacije} < / b >< št >
Informacije, prejete z malimi črkami - < b > {informacije2} < / b >
< / div >
< / strela-kartica>
< / predloga>
Izhod:
Dodajte ti dve komponenti na svojo stran. Prepričajte se, da sta obe komponenti na isti strani. V nasprotnem primeru funkcija ne bo delovala.
Vnesite nekaj besedila v komponento »Objavi« in kliknite gumb »Pošlji podatke«. Vidimo lahko, da je besedilo prejeto z velikimi in malimi črkami.
Zaključek
Zdaj lahko komuniciramo s komponentami LWC prek koncepta dogodkov v Salesforce LWC. V okviru tega priročnika smo se naučili komunicirati od starša do otroka in od otroka do starša. Model PubSub se uporablja v primeru, da vaše komponente med seboj niso povezane (ne Starš – Otrok). Vsak scenarij je razložen s preprostim primerom in poskrbite, da boste v datoteko »meta-xml« vključili kodo, ki je navedena na začetku tega vodnika.