LWC:n tapahtumia käytetään kommunikointiin komponenttien kanssa. Jos asiaan liittyviä komponentteja on, voi olla mahdollista kommunikoida vanhemmalta lapselle tai lapselta vanhemmalle. Jos on kaksi erillistä komponenttia, voimme kommunikoida PubSub (Publish-Subscribe) -mallin tai Lightning Message Servicen (LMS) kanssa. Tässä oppaassa keskustelemme siitä, kuinka kommunikoida tapahtumien kanssa vanhemmalta lapselle, lapsesta vanhemmalle ja toisiinsa liittyvien komponenttien kanssa PubSub-mallin avulla.
Voit sijoittaa komponentit tietuesivullesi, sovellussivullesi tai kotisivullesi. Emme määritä tätä tiedostoa (meta-xml) uudelleen esimerkkikoodinpätkien alla:
xml versio = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< on Paljastettu > totta on Paljastettu >
< tavoitteita >
< kohde > salama__RecordPage kohde >
< kohde > lightning__AppPage kohde >
< kohde > salama__Kotisivu kohde >
tavoitteita >
LightningComponent Bundle >
Vanhemman ja lapsen välinen viestintä
Jos kaksi komponenttia liittyvät toisiinsa, tämä tiedonsiirto on mahdollista. Täällä vanhempi lähettää tiedot lapselle. Pääkomponentti sisältää lapsikomponentin. Tällä lähestymistavalla voimme välittää primitiiviset tiedot (kokonaisluku, merkkijono, looginen arvo jne.) ylätasolta lapselle, ei-primitiiviset tiedot (joukko, objekti, objektijoukko jne.) ylätasolta lapselle ja välittää tiedot Lapsikomponentti ja vanhemman toiminto.
Jotta voimme viestiä vanhemmasta lapselle, meidän on asetettava Lapsi-komponentin kentät, ominaisuudet ja menetelmät julkisesti näkyviin. Tämä voi olla mahdollista koristelemalla kentät, ominaisuudet ja menetelmät 'api'-koristelijalla.
Esimerkki : Ilmoita muuttuja, jossa on 'api' alikomponentin 'js' tiedostossa.
@ api muuttuja ;
Nyt vanhempi-komponentti käyttää HTML-tiedoston Child-komponenttia HTML-attribuuttien kautta.
Esimerkki : Käytä Parent HTML -tiedoston muuttujaa.
< c - lapsi - comp-muuttuja > c - lapsi - comp >
Keskustellaan joistakin esimerkeistä, jotka kuvaavat kommunikointia vanhemman ja lapsen kanssa.
Esimerkki 1:
Tämä perusesimerkki osoittaa vanhemman lapselle lähettämän tiedon saamisen.
childtComp.js
Ensin luomme alikomponentin, joka sisältää 'informaatio'-muuttujan, joka on julkisesti saatavilla.
// Ilmoita muuttuja julkiseksi api Decoratorilla@ api tiedot
Voit tarkastella koko 'js'-koodia seuraavassa kuvakaappauksessa:
childtComp.html
Nyt määritämme tämän muuttujan HTML-tiedostossa keskitunnisteen sisällä.
< sapluuna >< salama - kortin otsikko = 'Lapsi' >
< keskusta >
< b > { tiedot } b >
keskusta >
salama - kortti >
sapluuna >
parentComp.js
Emme tee mitään 'js'-tiedostossa.
parentComp.html
Sijoita edellinen alakomponentti ylätason HTML-koodiin välittämällä julkinen muuttuja (tiedot) tekstin kanssa.
< sapluuna >< salama - kortin otsikko = 'Vanhempi' kuvake - nimi = 'standardi:tili' >
< c - childt - comp
tiedot = 'Hei, sain tiedon...'
> c - childt - comp >
salama - kortti >
sapluuna >
Lähtö:
Siirry nyt Salesforce-organisaatioon ja aseta Parent-komponentti 'Record'-sivulle. Näet, että lapsikomponentti on saanut tiedot vanhemmalta.
Esimerkki 2:
Luodaan kaksi syöttötekstikenttää, jotka hyväksyvät tekstin dynaamisesti pääkomponentin käyttöliittymästä. Jos lisäämme ensimmäisen tekstin yläkomponenttiin, alikomponentti saa tämän tekstin isoilla kirjaimilla. Vastaavasti se vastaanottaa tekstin pienillä kirjaimilla, jos lisäämme toisen tekstin.
childtComp.js
Luo kaksi muuttujaa – tiedot1 ja tiedot2 – raidan koristelulla.
- Luo convertToUpper()-menetelmä 'api'-koristelijalla, joka muuntaa ensimmäisen syötetyn tekstin isoiksi kirjaimiksi.
- Luo convertToLower()-menetelmä 'api'-koristelijalla, joka muuntaa toisen syötetyn tekstin pieniksi kirjaimiksi.
@ kappaleen tiedot2 ;
@ api
convertToUpper ( varsinaiset tiedot1 ) {
Tämä . Tietoja 1 = varsinaiset tiedot1. Isoin kirjaimeen ( ) ;
}
@ api
convertToLower ( varsinaiset tiedot1 ) {
Tämä . Tiedot2 = varsinaiset tiedot1. pienellä kirjaimella ( ) ;
}
Koko 'js'-koodi näyttää tältä:
childtComp.html
Näytämme arvot (Tieto1 ja Tiedot2), jotka tulevat 'js'-tiedostosta.
< sapluuna >< salama - kortin otsikko = 'Lapsi' >
Iso kirjain :& nbsp ; < b > { Tietoja 1 } b >< br >
Pienet kirjaimet :& nbsp ; < b > { Tiedot2 } b >
salama - kortti >
sapluuna >
parentComp.js
Luomme kaksi käsittelijämenetelmää, jotka valitsevat ali-HTML-mallin querySelector()-toiminnolla. Varmista, että sinun on välitettävä oikeat menetelmät, joilla teksti muunnetaan isoiksi tai pieniksi kirjaimille.
käsitteleTapahtuma1 ( tapahtuma ) {Tämä . sapluuna . querySelector ( 'c-childt-comp' ) . convertToUpper ( tapahtuma. kohde . arvo ) ;
}
käsitteleTapahtuma2 ( tapahtuma ) {
Tämä . sapluuna . querySelector ( 'c-childt-comp' ) . convertToLower ( tapahtuma. kohde . arvo ) ;
}
Koko 'js'-koodi näyttää tältä:
parentComp.html
Luo syöttöteksti, jossa on kahvatapahtumat molemmille. Aseta lapsikomponentti tähän yläkomponenttiin.
< sapluuna >< salama - kortin otsikko = 'Vanhempi' >
< keskusta >
< salama - syöttötarra = 'Kirjoita teksti pienillä kirjaimilla' vaihdossa = { käsitteleTapahtuma1 } > salama - syöttö >
keskusta >
< br >< br >
< keskusta >
< salama - syöttötarra = 'Syötä teksti isoilla kirjaimilla' vaihdossa = { käsitteleTapahtuma2 } > salama - syöttö >
keskusta >
< br >< br >< br >
< c - childt - comp > c - childt - comp >
salama - kortti >
sapluuna >
Lähtö:
Siirry nyt Salesforce-organisaatioon ja aseta Parent-komponentti 'Record'-sivulle.
Näet kaksi tekstinsyöttöä käyttöliittymässä.
Kirjoitetaan tekstiä ensimmäiseen syötteeseen, niin näet, että teksti muunnetaan isoiksi kirjaimiksi ja näytetään Lapsi-komponentissa.
Kirjoita tekstiä toiseen syötteeseen, niin näet, että teksti muunnetaan pieniksi kirjaimiksi ja näkyy lapsikomponentissa.
Lapsen ja vanhemman välinen viestintä
Samoin kuin edellisessä tiedonannossa, jotta lapsi voidaan viestiä vanhemmalle, molempien komponenttien tulee liittyä toisiinsa. Voimme kommunikoida lapsen vanhemmalle kolmella eri tavalla: soittamalla vanhemmasta lapselle yksinkertaisella tapahtumalla ja soittamalla vanhemmalle lapselle tapahtumalla, jossa data ja tapahtuma kuplivat. Tässä oppaassa tarkastellaan yksinkertaista tapahtumaa.
Jotta voimme viestiä lapsesta vanhemmalle, meidän on luotava ja lähetettävä tapahtumat. Tätä varten on luotava mukautettu tapahtuma. Mukautettu tapahtuma on itse luoma tapahtuma. Voimme luoda sen käyttämällä uutta avainsanaa. Tapahtuman_nimi voi olla mikä tahansa (se voi olla merkkijono, ei suurempia kuin isoja kirjaimia tai numeroita). Toistaiseksi emme keskustele vaihtoehdoista.
Syntaksi : uusi CustomEvent('Tapahtuman_nimi',{valinnat…})
Nyt sinulla on mukautettu tapahtuma. Seuraava vaihe on tapahtuman lähettäminen. Tapahtuman lähettämiseksi meidän on määritettävä tapahtuma, jonka loimme EventTarget.dispatchEvent()-metodissa.
Syntaksi : this.displatchEvent(new CustomEvent('Tapahtuman_nimi',{valinnat…})
Lopuksi meidän on hoidettava tapahtuma. Nyt meidän on kutsuttava yläkomponentin lapsikomponentti. Anna tapahtumasi nimi määrittämällä 'on'-etuliite tapahtuman nimeen. Tämä vie tapahtumakuuntelijan käsittelijän.
Syntaksi:
< c - lapsi - komponentti tapahtumanimessäsi = { kuuntelijaHandler } > c - lapsi - komponentti >Esimerkki:
Tässä esimerkissä luomme yhden yläkomponentin (esimerkkiParent) ja kaksi alakomponenttia.
- Ensimmäisessä lapsessa (esimerkkiLapsi) luomme syöttötekstin, jonka avulla käyttäjä voi antaa tekstiä. Sama teksti näkyy ylätason komponentissa isoilla kirjaimilla.
- Toisessa lapsessa (child2) luomme syöttötekstin, jonka avulla käyttäjä voi antaa tekstiä. Sama teksti näkyy ylätason komponentissa pienillä kirjaimilla.
esimerkkiLapsi.js
Luomme handChange1-menetelmän, joka luo ”linuxhintevent1” CustomEventin, jonka kohdearvo on yksityiskohta. Tämän jälkeen lähetämme tämän tapahtuman. Upota seuraava katkelma tähän 'js'-tiedostoon.
// hoitaa tapahtumakahvaVaihda1 ( tapahtuma ) {
tapahtuma. estääDefault ( ) ;
konst nimi1 = tapahtuma. kohde . arvo ;
konst valitse Tapahtuma1 = Uusi CustomEvent ( 'linuxhintevent1' , {
yksityiskohta : nimi1
} ) ;
Tämä . dispatchEvent ( valitse Tapahtuma1 ) ;
}
esimerkkiLapsi.html
Edellinen 'js':llä luotu käsittelymenetelmä käsitellään HTML-komponentin salamansyötteen perusteella.
< sapluuna >< salama - kortin otsikko = 'Lapsi 1' >
< div luokkaa = 'slds-m-around_medium' >
< salama - syöttötunniste = 'Syötä teksti pienillä kirjaimilla' vaihdossa = { kahvaVaihda1 } > salama - syöttö >
div >
salama - kortti >
sapluuna >
lapsi2.js
Luomme handChange2-menetelmän, joka luo 'linuxhintevent2' CustomEventin yksityiskohdan kohdearvona. Tämän jälkeen lähetämme tämän tapahtuman.
kahvaVaihto2 ( tapahtuma ) {tapahtuma. estääDefault ( ) ;
konst nimi2 = tapahtuma. kohde . arvo ;
konst valitse Tapahtuma2 = Uusi CustomEvent ( 'linuxhintevent2' , {
yksityiskohta : nimi2
} ) ;
Tämä . dispatchEvent ( valitse Tapahtuma2 ) ;
}
lapsi2.html
Edellinen 'js':llä luotu käsittelymenetelmä käsitellään HTML-komponentin salamansyötteen perusteella.
< sapluuna >< salama - kortin otsikko = 'Lapsi 2' >
< div luokkaa = 'slds-m-around_medium' >
< salama - syöttötunniste = 'Syötä teksti isoilla kirjaimilla' vaihdossa = { kahvaVaihto2 } > salama - syöttö >
div >
salama - kortti >
sapluuna >
esimerkkiParent.js: Upota tämä katkelma js-tiedostoosi kurssin sisällä.
- Muunna syöte isoiksi käyttämällä toUpperCase()-funktiota handleEvent1()-funktiossa ja tallenna se Information1-muuttujaan
- Muunna syöte pieniksi kirjaimia käyttämällä toLowerCase()-funktiota handleEvent2()-funktiossa ja tallenna se Information2-muuttujaan.
// Muunna syöte isoiksi käyttämällä toUpperCase()-funktiota
// handeEvent1() -muuttujaan ja tallenna Information1-muuttujaan
handleEvent1(tapahtuma) {
const input1 = tapahtuma.detail;
this.Information1 = input1.toUpperCase();
}
@raitatiedot2;
// Muunna syöte pieniksi kirjaimille käyttämällä toLowerCase()-funktiota
// handeEvent2() -muuttujaan ja tallenna Information2-muuttujaan
handleEvent2(tapahtuma) {
const input2 = tapahtuma.detail;
this.Information2 = input2.toLowerCase();
}
esimerkkiParent.html
Näytä nyt kaksi muuttujaa (Tiedot1 ja Tiedot2) Parent HTML -komponentissa määrittämällä molemmat alakomponentit.
< div luokkaa = 'slds-m-around_medium' >
Lapsi-1 -viesti isoilla kirjaimilla: < b > {Tiedot1} < / b >< br >
Lapsi-2 -viesti pienillä kirjaimilla: < b > {Tiedot2} < / b >< br >
< / b >< br >
< / div >
< / salamakortti>
< / malli>
Lähtö:
Siirry nyt Salesforce-organisaatioon ja aseta Parent-komponentti 'Record'-sivulle.
Näet, että yläosassa on kaksi alakomponenttia.
Kirjoita tekstiä syöttötekstiin Lapsi 1 -komponentin alle. Voimme nähdä, että tekstimme näkyy isoilla kirjaimilla emokomponentissa.
Anna tekstiä syöttötekstiin Lapsi 2 -komponentin alle. Näemme, että tekstimme näkyy pienillä kirjaimilla emokomponentissa.
Voi myös olla mahdollista syöttää molemmat tekstit kerralla.
PubSub malli
Kun työskentelet itsenäisten komponenttien kanssa (ei liity toisiinsa) ja jos haluat lähettää tietoja komponentista toiseen, voit käyttää tätä mallia. PubSub on lyhenne sanoista Publish and Subscribe. Komponentti, joka lähettää tiedot, tunnetaan nimellä Julkaisija ja komponentti, joka vastaanottaa tiedot, tunnetaan nimellä Tilaaja. On käytettävä pubsub-moduulia tapahtumien lähettämiseen komponenttien välillä. Se on jo ennalta määritetty ja Salesforcen antama. Tiedoston nimi on pubsub. Sinun on luotava LWC-komponentti ja kirjoitettava tämä koodi javascript-tiedostoon, joka on 'pubsub.js'.
Esimerkki:
Luodaan kaksi osaa – Julkaise ja Tilaa.
Publishissa sallimme käyttäjien luoda syöttötekstiä. Napsauttamalla painiketta tiedot vastaanotetaan isoilla ja pienillä kirjaimilla Tilaa-komponenttiin.
publish.js
Upota tämä koodi JSON-tiedostoosi. Täällä saamme tiedot ja julkaisemme tiedot.
Tietomuuttuja on isoilla kirjaimilla ja information1 on pieni. Varmista, että lisäät tämän tuontilausekkeen koodin alkuun – tuo pubsub osoitteesta c/pubsub.
tiedottiedot2
// Hanki tiedot isoilla ja pienillä kirjaimilla
tiedonkäsittelijä ( tapahtuma ) {
Tämä . tiedot = tapahtuma. kohde . arvo ;
Tämä . tiedot2 = tapahtuma. kohde . arvo ;
}
// Julkaise molemmat tiedot (isoilla ja pienillä kirjaimilla)
publishHandler ( ) {
pubi. julkaista ( 'Julkaista' , Tämä . tiedot )
pubi. julkaista ( 'Julkaista' , Tämä . tiedot2 )
}
Sen pitäisi näyttää tältä:
publish.html
Ensin luomme salamansyötteen hyväksymään tekstin käsittelijän tiedoilla. Sen jälkeen luodaan yksi painike, jossa on onclick-toiminto. Nämä toiminnot ovat edellisessä 'js'-koodinpätkässä.
< / salamakortti>
< / malli>
subscribe.js
Upota tämä koodi JSON-tiedostoosi. Tässä ensin tilataan tiedot muuntamalla ne isoiksi ja pieniksi erikseen callSubscriber()-metodin sisällä. Tämän jälkeen kutsumme tätä menetelmää connectcallback()-menetelmän kautta. Varmista, että lisäät tämän tuontilausekkeen koodin alkuun – tuo pubsub osoitteesta c/pubsub.
tiedottiedot2
// kutsun kutsun Subscriber()
yhdistetty takaisinsoitto ( ) {
Tämä . soita Tilaajalle ( )
}
// Tilaa tiedot muuttamalla isot kirjaimet
soita Tilaajalle ( ) {
pubi. tilata ( 'Julkaista' , ( tiedot ) => {
Tämä . tiedot = tiedot. Isoin kirjaimeen ( ) ;
} ) ,
// Tilaa tiedot muuttamalla pieniä kirjaimia
pubi. tilata ( 'Julkaista' , ( tiedot2 ) => {
Tämä . tiedot2 = tiedot2. pienellä kirjaimella ( ) ;
} )
}
Sen pitäisi näyttää tältä:
tilaa.html
Näytämme tekstin isoilla kirjaimilla (tallennettu tietoon) ja pienillä kirjaimilla (tallennettu tietoon2).
< div luokkaa = 'slds-p-around_medium' >
Tiedot vastaanotettu isoilla kirjaimilla - < b > {tiedot} < / b >< br >
Pienillä kirjaimilla saatu tieto - < b > {tiedot2} < / b >
< / div >
< / salamakortti>
< / malli>
Lähtö:
Lisää nämä kaksi komponenttia sivullesi. Varmista, että molemmat osat ovat samalla sivulla. Muuten toiminto ei toimi.
Syötetään tekstiä 'Julkaise'-komponenttiin ja napsauta 'Lähetä tiedot' -painiketta. Näemme, että teksti vastaanotetaan isoilla ja pienillä kirjaimilla.
Johtopäätös
Nyt voimme kommunikoida LWC-komponenttien kanssa Salesforce LWC:n tapahtumakonseptin kautta. Osana tätä opasta opimme kommunikoimaan vanhemmalta lapselle ja lapselta vanhemmalle. PubSub-mallia käytetään, jos komponentit eivät liity toisiinsa (ei vanhempi – lapsi). Jokainen skenaario selitetään yksinkertaisella esimerkillä ja varmista, että sisällytät tämän oppaan alussa olevan koodin 'meta-xml'-tiedostoon.