Az LWC eseményei a komponensekkel való kommunikációra szolgálnak. Ha vannak kapcsolódó összetevők, lehetséges a szülő és a gyermek közötti kommunikáció, illetve a gyermek és a szülő közötti kommunikáció. Ha van két független összetevő, akkor a PubSub (Publish-Subscribe) modellen vagy a Lightning Message Service (LMS) segítségével kommunikálhatunk. Ebben az útmutatóban megvitatjuk, hogyan kommunikálhatunk eseményekkel a szülőtől a gyermekig, a gyermektől a szülőig, valamint az egymással összefüggő összetevőkkel a PubSub modell használatával.
Az összetevőket elhelyezheti a felvételi oldalon, az alkalmazásoldalon vagy a kezdőlapon. Ezt a fájlt (meta-xml) nem adjuk meg újra a példakódrészletek alatt:
xml verzió = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< isExposed > igaz isExposed >
< célpontok >
< cél > villám__RecordPage cél >
< cél > lightning__AppPage cél >
< cél > villám__Kezdőlap cél >
célpontok >
LightningComponentBundle >
Szülő-gyermek kommunikáció
Ha két komponens kapcsolatban áll egymással, ez a kommunikáció lehetséges. Itt a Szülő elküldi az adatokat a Gyermeknek. A szülőkomponens tartalmazza a Child komponenst. Ezzel a megközelítéssel átadhatjuk a primitív adatokat (egész, karakterlánc, logikai érték stb.) a szülőről a gyermeknek, a nem primitív adatokat (tömb, objektum, objektumtömb stb.) szülőről gyermekre, átadva az adatokat a gyermeknek. a Gyermek összetevő a Szülőn végzett művelettel.
Ahhoz, hogy a szülőt a gyermekkel közölhessük, nyilvánosan láthatóvá kell tennünk a Gyermek komponensben elérhető mezőket, tulajdonságokat és metódusokat. Ez a mezők, tulajdonságok és módszerek „api” dekorátorral történő díszítésével lehetséges.
Példa : Deklaráljon egy változót „api”-vel a gyermekkomponens „js” fájljában.
@ api változó ;
Most a Szülő összetevő a Child összetevőt használja a HTML-fájlban a HTML-attribútumokon keresztül.
Példa : Használja a szülő HTML-fájlban található változót.
< c - gyermek - komp változó > c - gyermek - comp >
Nézzünk meg néhány példát, amelyek leírják, hogyan kommunikáljunk a szülővel a gyermekkel.
1. példa:
Ez az alappélda egy olyan információ megszerzését mutatja be, amelyet a szülő küld el a gyermeknek.
childtComp.js
Először létrehozunk egy Child komponenst, amely tartalmazza a nyilvánosan elérhető „információ” változót.
// Nyilvánossá nyilvánítja a változót az api Decorator segítségével@ api információk
A teljes „js” kódot a következő képernyőképen tekintheti meg:
childtComp.html
Most adjuk meg ezt a változót a HTML-fájlban a középső címkén belül.
< sablon >< villám - kártya címe = 'Gyermek' >
< központ >
< b > { információ } b >
központ >
villám - kártya >
sablon >
parentComp.js
Nem csinálunk semmit a „js” fájlban.
parentComp.html
Helyezze el az előző gyermekkomponenst a szülő HTML-be úgy, hogy a nyilvános változót (információt) szöveggel együtt adja át.
< sablon >< villám - kártya címe = 'Szülő' ikon - név = 'standard:fiók' >
< c - childt - comp
információ = 'Sziasztok, információt kaptam...'
> c - childt - comp >
villám - kártya >
sablon >
Kimenet:
Most lépjen a Salesforce Org oldalára, és helyezze a szülő összetevőt a „Record” oldalra. Látni fogja, hogy a Gyermek komponens megkapta az információt a szülőtől.
2. példa:
Hozzon létre két beviteli szövegmezőt, amelyek dinamikusan fogadják a szöveget a szülőkomponens felhasználói felületéről. Ha az első szöveget beszúrjuk a Szülő komponensbe, akkor a gyermekkomponens ezt a szöveget nagybetűvel kapja. Hasonlóképpen kisbetűvel kapja a szöveget, ha beszúrjuk a második szöveget.
childtComp.js
Hozzon létre két változót – információ1 és információ2 – egy pályadekorátorral.
- Hozza létre a convertToUpper() metódust az „api” dekorátorral, amely az első beviteli szöveget nagybetűssé alakítja.
- Hozza létre a convertToLower() metódust az „api” dekorátorral, amely a második beviteli szöveget kisbetűssé alakítja.
@ pálya információ2 ;
@ api
convertToUpper ( aktuális információ1 ) {
ez . Információ1 = aktuális információ1. toUpperCase ( ) ;
}
@ api
convertToLower ( aktuális információ1 ) {
ez . Információ2 = aktuális információ1. to LowCase ( ) ;
}
A teljes „js” kód így néz ki:
childtComp.html
Megjelenítjük a „js” fájlból származó értékeket (Information1 és Information2).
< sablon >< villám - kártya címe = 'Gyermek' >
Nagybetűs :& nbsp ; < b > { Információ1 } b >< br >
Kisbetűs :& nbsp ; < b > { Információ2 } b >
villám - kártya >
sablon >
parentComp.js
Létrehozunk két kezelő metódust, amelyek kiválasztják a gyermek HTML-sablont a querySelector() segítségével. Győződjön meg arról, hogy a megfelelő módszereket kell átadnia a szöveg nagy- vagy kisbetűssé alakításához.
handleEvent1 ( esemény ) {ez . sablon . querySelector ( 'c-childt-comp' ) . convertToUpper ( esemény. cél . érték ) ;
}
kezeleseEvent2 ( esemény ) {
ez . sablon . querySelector ( 'c-childt-comp' ) . convertToLower ( esemény. cél . érték ) ;
}
A teljes „js” kód így néz ki:
parentComp.html
Hozzon létre egy beviteli szöveget kezelőeseményekkel mindkettőhöz. Helyezze a gyermek összetevőt ebbe a szülő összetevőbe.
< sablon >< villám - kártya címe = 'Szülő' >
< központ >
< villám - beviteli címke = 'Írja be a szöveget kisbetűvel' váltáskor = { handleEvent1 } > villám - bemenet >
központ >
< br >< br >
< központ >
< villám - beviteli címke = 'Írja be a szöveget nagybetűvel' váltáskor = { kezeleseEvent2 } > villám - bemenet >
központ >
< br >< br >< br >
< c - childt - comp > c - childt - comp >
villám - kártya >
sablon >
Kimenet:
Most lépjen a Salesforce Org oldalára, és helyezze a szülő összetevőt a „Record” oldalra.
Két szövegbevitelt fog látni a felhasználói felületen.
Írjunk szöveget az első bevitelbe, és látni fogja, hogy a szöveg nagybetűssé alakul, és megjelenik a Gyermek komponensben.
Írjon egy szöveget a második bevitelre, és látni fogja, hogy a szöveg kisbetűssé alakul, és megjelenik a Gyermek komponensben.
Gyermek és szülő kommunikáció
Az előző kommunikációhoz hasonlóan a Gyermek és a Szülő közötti kommunikációhoz mindkét összetevőnek kapcsolódnia kell egymáshoz. Három különböző megközelítésben kommunikálhatjuk a Gyermeket a Szülővel: a Szülőt a Gyermekhez hívva egy egyszerű esemény segítségével, és a Szülőt a Gyermekhez hívva egy esemény segítségével az adatokkal és az esemény buborékolásával. Ebben az útmutatóban az egyszerű eseményt nézzük meg.
Ahhoz, hogy a Gyermeket a Szülővel közöljük, létre kell hoznunk és el kell juttatnunk az eseményeket. Ehhez létre kell hozni egy egyéni eseményt. Az egyéni esemény olyan esemény, amelyet Ön hoz létre. Az új kulcsszó használatával létrehozhatjuk. Az Event_Name bármi lehet (lehet karakterlánc, nem haladhatja meg a nagybetűket vagy számjegyeket). Egyelőre nem tárgyaljuk a lehetőségeket.
Szintaxis : új CustomEvent('Esemény_neve',{opciók…})
Most megvan az egyéni esemény. A következő lépés az esemény elküldése. Az esemény elküldéséhez meg kell adnunk azt az eseményt, amelyet az EventTarget.dispatchEvent() metódussal hoztunk létre.
Szintaxis : this.displatchEvent(new CustomEvent('Esemény_neve',{opciók…})
Végül kezelnünk kell az eseményt. Most meg kell hívnunk a szülőkomponens gyermekkomponensét. Adja át az esemény nevét az „on” előtag megadásával az esemény nevéhez. Ez veszi az eseményfigyelő kezelőt.
Szintaxis:
< c - gyermek - az eseménynév összetevője = { hallgató Handler } > c - gyermek - összetevő >Példa:
Ebben a példában egy szülőkomponenst (exampleParent) és két gyermekkomponenst hozunk létre.
- Az első Child-ben (példaChild) létrehozunk egy beviteli szöveget, amely lehetővé teszi a felhasználó számára, hogy szöveget adjon meg. Ugyanez a szöveg jelenik meg a Szülő komponensben nagybetűvel.
- A második gyermekben (child2) létrehozunk egy beviteli szöveget, amely lehetővé teszi a felhasználó számára, hogy szöveget adjon meg. Ugyanez a szöveg jelenik meg a Szülő komponensben kisbetűvel.
exampleChild.js
Létrehozunk egy handleChange1 metódust, amely létrehozza a „linuxhintevent1” CustomEvent-et a részletességgel célértékként. Ezt követően ezt az eseményt kiküldjük. Illessze be a következő kódrészletet ebbe a „js” fájlba.
// kezelni az eseménytHandChange1 ( esemény ) {
esemény. preventDefault ( ) ;
const név1 = esemény. cél . érték ;
const válassza az Eseményt1 = új CustomEvent ( 'linuxhintevent1' , {
Részlet : név1
} ) ;
ez . dispatchEvent ( válassza az Eseményt1 ) ;
}
exampleChild.html
A „js”-ben létrehozott előző kezelési metódus a HTML-összetevő villámbevitele alapján történik.
< sablon >< villám - kártya címe = 'Gyermek 1' >
< div osztály = 'slds-m-around_medium' >
< villám - beviteli címke = 'Írja be a szöveget kisbetűkkel' váltáskor = { HandChange1 } > villám - bemenet >
div >
villám - kártya >
sablon >
gyermek2.js
Létrehozunk egy handleChange2 metódust, amely létrehozza a „linuxhintevent2” CustomEvent-et a részletességgel célértékként. Ezt követően ezt az eseményt kiküldjük.
HandChange2 ( esemény ) {esemény. preventDefault ( ) ;
const név2 = esemény. cél . érték ;
const válasszonEsemény2 = új CustomEvent ( 'linuxhintevent2' , {
Részlet : név2
} ) ;
ez . dispatchEvent ( válasszonEsemény2 ) ;
}
gyermek2.html
A „js”-ben létrehozott előző kezelési metódus a HTML-összetevő villámbevitele alapján történik.
< sablon >< villám - kártya címe = '2. gyerek' >
< div osztály = 'slds-m-around_medium' >
< villám - beviteli címke = 'Írja be a szöveget nagybetűvel' váltáskor = { HandChange2 } > villám - bemenet >
div >
villám - kártya >
sablon >
exampleParent.js: Illessze be ezt a kódrészletet az osztályon belüli „js” fájljába.
- Konvertálja a bemenetet nagybetűssé a handleEvent1() toUpperCase() függvényével, és tárolja az Information1 változóban
- Konvertálja a bemenetet kisbetűssé a handleEvent2() toLowerCase() függvényével, és tárolja az Information2 változóban.
// Konvertálja a bemenetet nagybetűssé a toUpperCase() függvény segítségével
// a handleEvent1()-ben és tárolja az Information1 változóban
handleEvent1(esemény) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Konvertálja a bemenetet kisbetűssé a toLowerCase() függvény segítségével
// a handleEvent2()-ben és tárolja az Information2 változóban
handleEvent2(esemény) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Most jelenítse meg a két változót (Információ1 és Információ2) a Szülő HTML komponensben, mindkét gyermekkomponens megadásával.
< div osztály = 'slds-m-around_medium' >
Gyermek-1 üzenet nagybetűvel: < b > {Információ1} < / b >< br >
Gyermek-2 üzenet kisbetűvel: < b > {Információ2} < / b >< br >
< / b >< br >
< / div >
< / villámkártya>
< / sablon>
Kimenet:
Most lépjen a Salesforce Org oldalára, és helyezze a szülő összetevőt a „Record” oldalra.
Láthatja, hogy két gyermekkomponens létezik a szülőben.
Írjunk be szöveget a beviteli szövegbe a Child 1 komponens alá. Láthatjuk, hogy a szövegünk nagybetűvel jelenik meg a Szülő komponensen.
Adjon meg néhány szöveget a beviteli szövegben a Child 2 komponens alatt. Láthatjuk, hogy a szövegünk kisbetűvel jelenik meg a Szülő komponensen.
Lehetőség van arra is, hogy mindkét szöveget egyszerre beírjuk.
PubSub modell
Ha független (egymáshoz nem kapcsolódó) komponensekkel dolgozik, és az információkat egyik komponensről a másikra szeretné küldeni, használhatja ezt a modellt. A PubSub a Publish and Subscribe rövidítése. Az adatokat küldő összetevő a Kiadó, az adatokat fogadó összetevő pedig az Előfizető. Az események komponensek közötti elküldéséhez a pubsub modult kell használni. Már előre definiálta és megadta a Salesforce. A fájl neve pubsub. Létre kell hoznia egy LWC összetevőt, és be kell írnia ezt a kódot a javascript fájlba, amely „pubsub.js”.
Példa:
Hozzon létre két komponenst – a közzétételt és az előfizetést.
A Közzétételben lehetővé tesszük a felhasználók számára beviteli szöveg létrehozását. A gombra kattintva az adatok nagy- és kisbetűkkel érkeznek az Előfizetés komponensbe.
publish.js
Illessze be ezt a kódot JSON-fájljába. Itt megkapjuk az információkat és közzétesszük az információkat.
Az információs változó nagybetűs, az információ1 pedig kisbetűs lesz. Ügyeljen arra, hogy a kód elején szerepeljen ez az importálási utasítás – import pubsub innen: „c/pubsub”.
információinformáció2
// Az információ lekérése nagy- és kisbetűkkel
információkezelő ( esemény ) {
ez . információ = esemény. cél . érték ;
ez . információ2 = esemény. cél . érték ;
}
// Mindkét információ közzététele (nagy- és kisbetűvel)
publishHandler ( ) {
kocsma. közzé ( 'Közzététel' , ez . információ )
kocsma. közzé ( 'Közzététel' , ez . információ2 )
}
Így kell kinéznie:
közzé.html
Először létrehozzuk a villám bemenetet, hogy elfogadjuk a szöveget a kezelő információival. Ezt követően létrejön egy gomb az onclick funkcióval. Ezek a funkciók az előző „js” kódrészletben találhatók.
< / villámkártya>
< / sablon>
subscribe.js
Illessze be ezt a kódot JSON-fájljába. Itt először előfizetjük az információt úgy, hogy a callSubscriber() metóduson belül külön-külön nagy- és kisbetűvé alakítjuk. Ezután ezt a metódust a connectcallback() metóduson keresztül hívjuk meg. Ügyeljen arra, hogy a kód elején szerepeljen ez az importálási utasítás – import pubsub innen: „c/pubsub”.
információinformáció2
// a callSubscriber() meghívása
csatlakoztatva Visszahívás ( ) {
ez . hívás Előfizető ( )
}
// Iratkozzon fel az információra a nagybetűsre konvertálással
hívás Előfizető ( ) {
kocsma. Iratkozz fel ( 'Közzététel' , ( információ ) => {
ez . információ = információ. toUpperCase ( ) ;
} ) ,
// Iratkozzon fel az információra kisbetűsre konvertálással
kocsma. Iratkozz fel ( 'Közzététel' , ( információ2 ) => {
ez . információ2 = információ2. to LowCase ( ) ;
} )
}
Így kell kinéznie:
feliratkozás.html
A szöveget nagybetűvel (információban tárolva) és kisbetűvel (információban tárolva2) jelenítjük meg.
< div osztály = 'slds-p-around_medium' >
Nagybetűvel kapott információ - < b > {információ} < / b >< br >
Kisbetűvel kapott információ - < b > {információ2} < / b >
< / div >
< / villámkártya>
< / sablon>
Kimenet:
Adja hozzá ezt a két összetevőt az oldalához. Győződjön meg arról, hogy mindkét összetevő ugyanazon az oldalon van. Ellenkező esetben a funkció nem fog működni.
Írjunk be néhány szöveget a „Közzététel” komponensbe, és kattintsunk az „Adatok küldése” gombra. Láthatjuk, hogy a szöveg nagy- és kisbetűvel érkezik.
Következtetés
Mostantól a Salesforce LWC eseménykoncepcióján keresztül tudunk kommunikálni az LWC összetevőkkel. Ennek az útmutatónak a részeként megtanultuk, hogyan kommunikáljunk a szülő és a gyermek között, valamint a gyermek és a szülő között. A PubSub modellt arra az esetre használjuk, ha az összetevők nem kapcsolódnak egymáshoz (nem szülő – gyermek). Mindegyik forgatókönyvet egy egyszerű példa ismerteti, és győződjön meg arról, hogy az útmutató elején található kódot tartalmazza a „meta-xml” fájlban.