Události v LWC se používají ke komunikaci s komponentami. Pokud existují související komponenty, může být možné komunikovat z rodiče na dítě nebo z dítěte na rodiče. Pokud existují dvě nesouvisející součásti, můžeme komunikovat prostřednictvím modelu PubSub (Publish-Subscribe) nebo pomocí Lightning Message Service (LMS). V této příručce se budeme zabývat tím, jak komunikovat s událostmi od rodiče k dítěti, z dítěte na rodiče a vzájemně souvisejících komponent pomocí modelu PubSub.
Komponenty můžete umístit na svou záznamovou stránku, stránku aplikace nebo domovskou stránku. Tento soubor (meta-xml) nebudeme znovu specifikovat pod ukázkovými úryvky kódu:
xml verze = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< je vystavena > skutečný je vystavena >
< cíle >
< cílová > lightning__RecordPage cílová >
< cílová > lightning__AppPage cílová >
< cílová > lightning__HomePage cílová >
cíle >
LightningComponentBundle >
Komunikace rodiče s dítětem
Pokud jsou dvě složky ve vzájemném vztahu, je tato komunikace možná. Zde rodič odešle data Dítěti. Nadřazená komponenta obsahuje podřízenou komponentu. S tímto přístupem můžeme předávat primitivní data (celé číslo, řetězec, logická hodnota atd.) od rodiče k potomkovi, předávat neprimitivní data (pole, objekt, pole objektů atd.) z rodiče na potomka a předávat data podřízená komponenta s akcí na nadřazeném prvku.
Abychom mohli komunikovat nadřazený prvek s podřízeným prvkem, musíme zpřístupnit pole, vlastnosti a metody v podřízené komponentě veřejně viditelné. Toho lze dosáhnout zdobením polí, vlastností a metod dekorátorem „api“.
Příklad : Deklarujte proměnnou s „api“ v souboru „js“ podřízené komponenty.
@ api proměnná ;
Nyní komponenta Parent používá komponentu Child v souboru HTML prostřednictvím atributů HTML.
Příklad : Použijte proměnnou v nadřazeném HTML souboru.
< C - dítě - comp proměnná > C - dítě - komp >
Proberme několik příkladů, které popisují, jak komunikovat s rodiči s dítětem.
Příklad 1:
Tento základní příklad ukazuje získávání informací, které rodič posílá dítěti.
childtComp.js
Nejprve vytvoříme komponentu Child, která obsahuje proměnnou „information“, která je veřejně dostupná.
// Deklarujte proměnnou jako veřejnou pomocí nástroje api Decorator@ api informace
Celý kód „js“ si můžete prohlédnout na následujícím snímku obrazovky:
childtComp.html
Nyní specifikujeme tuto proměnnou v souboru HTML v rámci centrální značky.
< šablona >< Blesk - název karty = 'Dítě' >
< centrum >
< b > { informace } b >
centrum >
Blesk - Kartu >
šablona >
parentComp.js
V souboru „js“ nic neděláme.
parentComp.html
Umístěte předchozí komponentu Child do svého nadřazeného HTML předáním veřejné proměnné (informace) s nějakým textem.
< šablona >< Blesk - název karty = 'Rodič' ikona - název = 'standard:account' >
< C - childt - komp
informace = 'Dobrý den, dostal jsem informaci...'
> C - childt - komp >
Blesk - Kartu >
šablona >
Výstup:
Nyní přejděte do své organizace Salesforce a umístěte nadřazenou komponentu na stránku „Záznam“. Uvidíte, že podřízená komponenta obdržela informace od nadřazeného prvku.
Příklad 2:
Vytvořme dvě vstupní textová pole, která budou dynamicky přijímat text z uživatelského rozhraní v nadřazené komponentě. Pokud vložíme první text do komponenty Parent, podřízená komponenta obdrží tento text velkými písmeny. Podobně přijímá text s malými písmeny, pokud vložíme druhý text.
childtComp.js
Vytvořte dvě proměnné – informace1 a informace2 – pomocí dekorátoru kolejí.
- Vytvořte metodu convertToUpper() s dekorátorem „api“, který převede první vstupní text na velká písmena.
- Vytvořte metodu convertToLower() s dekorátorem „api“, který převede druhý vstupní text na malá písmena.
@ Informace o skladbě 2 ;
@ api
convertToUpper ( aktuální informace1 ) {
tento . Informace1 = aktuální informace1. velká písmena ( ) ;
}
@ api
convertToLower ( aktuální informace1 ) {
tento . Informace2 = aktuální informace1. na malá písmena ( ) ;
}
Celý kód „js“ vypadá takto:
childtComp.html
Zobrazíme hodnoty (Informace1 a Informace2), které pocházejí ze souboru „js“.
< šablona >< Blesk - název karty = 'Dítě' >
Velká písmena :& nbsp ; < b > { Informace1 } b < br >
Malá písmena :& nbsp ; < b > { Informace2 } b >
Blesk - Kartu >
šablona >
parentComp.js
Vytváříme dvě obslužné metody, které vyberou podřízenou HTML šablonu pomocí querySelector(). Ujistěte se, že musíte předat správné metody, které převádějí text na velká nebo malá písmena.
handleEvent1 ( událost ) {tento . šablona . querySelector ( 'c-childt-comp' ) . convertToUpper ( událost. cílová . hodnota ) ;
}
handleEvent2 ( událost ) {
tento . šablona . querySelector ( 'c-childt-comp' ) . convertToLower ( událost. cílová . hodnota ) ;
}
Celý kód „js“ vypadá takto:
parentComp.html
Vytvořte vstupní text s událostmi zpracování pro oba. Umístěte podřízenou komponentu do této nadřazené komponenty.
< šablona >< Blesk - název karty = 'Rodič' >
< centrum >
< Blesk - vstupní štítek = 'Zadejte text malými písmeny' při změně = { handleEvent1 } > Blesk - vstup >
centrum >
< br < br >
< centrum >
< Blesk - vstupní štítek = 'Zadejte text velkými písmeny' při změně = { handleEvent2 } > Blesk - vstup >
centrum >
< br < br < br >
< C - childt - komp > C - childt - komp >
Blesk - Kartu >
šablona >
Výstup:
Nyní přejděte do své organizace Salesforce a umístěte nadřazenou komponentu na stránku „Záznam“.
Na uživatelském rozhraní uvidíte dva textové vstupy.
Napíšeme nějaký text do prvního vstupu a uvidíte, že text je převeden na velká písmena a je zobrazen v komponentě Child.
Napište nějaký text do druhého vstupu a uvidíte, že text je převeden na malá písmena a je zobrazen v komponentě Child.
Komunikace mezi dítětem a rodičem
Podobně jako v předchozí komunikaci, pro komunikaci dítěte s rodiči by se obě složky měly vztahovat k sobě navzájem. Dítě můžeme sdělit rodiči třemi různými přístupy: voláním rodiče dítěti pomocí jednoduché události a voláním rodiče dítěti pomocí události s bublajícími daty a událostmi. V tomto návodu se podíváme na jednoduchou událost.
Abychom mohli sdělit dítě rodiči, musíme vytvořit a odeslat události. K tomu je třeba vytvořit vlastní událost. Vlastní událost je událost, kterou vytvoříte sami. Můžeme jej vytvořit pomocí nového klíčového slova. Název_události může být jakýkoli (může to být řetězec, ne větší než velká písmena nebo číslice). Prozatím nebudeme diskutovat o možnostech.
Syntax : new CustomEvent(‘Event_Name’,{options…})
Nyní máte vlastní událost. Dalším krokem je odeslání události. K odeslání události musíme zadat událost, kterou jsme vytvořili v metodě EventTarget.dispatchEvent().
Syntax : this.displatchEvent(new CustomEvent(‘Event_Name’,{options…})
Nakonec musíme zvládnout událost. Nyní musíme zavolat podřízenou komponentu ve vaší nadřazené komponentě. Předejte název své události zadáním předpony „on“ před názvem události. To vyžaduje obsluhu posluchače události.
Syntax:
< C - dítě - komponenta onyourEventName = { posluchačHandler } > C - dítě - komponent >Příklad:
V tomto příkladu vytvoříme jednu nadřazenou komponentu (exampleParent) a dvě podřízené komponenty.
- V prvním Child (exampleChild) vytvoříme vstupní text, který uživateli umožní zadat nějaký text. Stejný text se zobrazí v nadřazené komponentě velkými písmeny.
- Ve druhém Child (child2) vytvoříme vstupní text, který uživateli umožní poskytnout nějaký text. Stejný text se zobrazí v nadřazené komponentě malými písmeny.
exampleChild.js
Vytvoříme metodu handleChange1, která vytvoří CustomEvent „linuxhintevent1“ s podrobnostmi jako cílovou hodnotou. Poté tuto událost odešleme. Do tohoto souboru „js“ vložte následující fragment.
// zpracování událostihandleZměna1 ( událost ) {
událost. preventVýchozí ( ) ;
konst jméno1 = událost. cílová . hodnota ;
konst vybratUdálost1 = Nový CustomEvent ( 'linuxhintevent1' , {
detail : jméno1
} ) ;
tento . událost odeslání ( vybratUdálost1 ) ;
}
exampleChild.html
Předchozí metoda handle, která je vytvořena v „js“, je zpracována na základě bleskového vstupu v komponentě HTML.
< šablona >< Blesk - název karty = 'Dítě 1' >
< div třída = 'slds-m-around_medium' >
< Blesk - vstupní štítek = 'Zadejte text malými písmeny' při změně = { handleZměna1 } > Blesk - vstup >
div >
Blesk - Kartu >
šablona >
child2.js
Vytvoříme metodu handleChange2, která vytvoří CustomEvent „linuxhintevent2“ s detailem jako cílovou hodnotou. Poté tuto událost odešleme.
handleChange2 ( událost ) {událost. preventVýchozí ( ) ;
konst jméno2 = událost. cílová . hodnota ;
konst selectEvent2 = Nový CustomEvent ( 'linuxhintevent2' , {
detail : jméno2
} ) ;
tento . událost odeslání ( selectEvent2 ) ;
}
dítě2.html
Předchozí metoda handle, která je vytvořena v „js“, je zpracována na základě bleskového vstupu v komponentě HTML.
< šablona >< Blesk - název karty = 'Dítě 2' >
< div třída = 'slds-m-around_medium' >
< Blesk - vstupní štítek = 'Zadejte text velkými písmeny' při změně = { handleChange2 } > Blesk - vstup >
div >
Blesk - Kartu >
šablona >
exampleParent.js: Vložte tento úryvek do svého souboru „js“ uvnitř třídy.
- Převeďte vstup na velká písmena pomocí funkce toUpperCase() v handleEvent1() a uložte jej do proměnné Information1
- Převeďte vstup na malá písmena pomocí funkce toLowerCase() v handleEvent2() a uložte jej do proměnné Information2.
// Převede vstup na velká písmena pomocí funkce toUpperCase().
// v handleEvent1() a uložit do proměnné Information1
handleEvent1(event) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Převede vstup na malá písmena pomocí funkce toLowerCase().
// v handleEvent2() a uložit do proměnné Information2
handleEvent2(event) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Nyní zobrazte dvě proměnné (Information1 & Information2) v nadřazené HTML komponentě zadáním obou podřízených komponent.
<šablona>< div třída = 'slds-m-around_medium' >
Dítě-1 zpráva velkými písmeny: < b > {Informace1} < / b < br >
Dítě-2 zpráva malými písmeny: < b > {Information2} < / b < br >
< / b < br >
< / div >
< / blesková karta>
< / šablona>
Výstup:
Nyní přejděte do své organizace Salesforce a umístěte nadřazenou komponentu na stránku „Záznam“.
Můžete vidět, že v nadřazeném prvku existují dvě podřízené komponenty.
Zapišme nějaký text do vstupního textu pod komponentou Child 1. Vidíme, že náš text je v nadřazené komponentě zobrazen velkými písmeny.
Zadejte nějaký text do vstupního textu pod komponentou Child 2. Vidíme, že náš text je v nadřazené komponentě zobrazen malými písmeny.
Je také možné zadat oba texty najednou.
Model PubSub
Pokud pracujete s nezávislými komponentami (které spolu nesouvisí) a chcete-li posílat informace z jedné komponenty do druhé, můžete použít tento model. PubSub je zkratka pro Publish and Subscribe. Komponenta, která odesílá data, je známá jako Publisher a komponenta, která data přijímá, je známá jako Subscriber. K odesílání událostí mezi komponentami je nutné použít modul pubsub. Je to již předdefinované a dané Salesforce. Název souboru je pubsub. Musíte vytvořit komponentu LWC a zadat tento kód do souboru javascript, který je „pubsub.js“.
Příklad:
Vytvoříme dvě složky – Publikovat a Odebírat.
V Publish umožňujeme uživatelům vytvářet vstupní text. Kliknutím na tlačítko jsou data přijata velkými a malými písmeny v komponentě Subscribe.
publish.js
Vložte tento kód do svého souboru JSON. Zde získáváme informace a zveřejňujeme je.
Proměnná informace bude velká a informace1 bude malá. Ujistěte se, že jste na začátek kódu zahrnuli tento příkaz o importu – import pubsub z „c/pubsub“.
informaceinformace2
// Získání informací velkými a malými písmeny
informationHandler ( událost ) {
tento . informace = událost. cílová . hodnota ;
tento . informace2 = událost. cílová . hodnota ;
}
// Zveřejněte obě informace (velkými i malými písmeny)
publishHandler ( ) {
pubsub. publikovat ( 'Publikovat' , tento . informace )
pubsub. publikovat ( 'Publikovat' , tento . informace2 )
}
Mělo by to vypadat takto:
publikovat.html
Nejprve vytvoříme bleskový vstup pro přijetí textu s informacemi o obsluze. Poté se vytvoří jedno tlačítko s funkcí onclick. Tyto funkce jsou v předchozím úryvku kódu „js“.
<šablona>< / blesková karta>
< / šablona>
předplatit.js
Vložte tento kód do svého souboru JSON. Zde nejprve informace odebereme tak, že je v metodě callSubscriber() převedeme na velká a malá písmena odděleně. Poté tuto metodu vyvoláme pomocí metody connectedcallback() . Ujistěte se, že jste na začátek kódu zahrnuli tento příkaz o importu – import pubsub z „c/pubsub“.
informaceinformace2
// vyvolání funkce callSubscriber()
připojeno zpětné volání ( ) {
tento . hovor předplatitel ( )
}
// Odebírejte informace převodem na velká písmena
hovor předplatitel ( ) {
pubsub. předplatit ( 'Publikovat' , ( informace ) => {
tento . informace = informace. velká písmena ( ) ;
} ) ,
// Odebírejte informace převodem na malá písmena
pubsub. předplatit ( 'Publikovat' , ( informace2 ) => {
tento . informace2 = informace2. na malá písmena ( ) ;
} )
}
Mělo by to vypadat takto:
předplatit.html
Text zobrazujeme velkými písmeny (uložený v informacích) a malými písmeny (uloženými v informacích2).
<šablona>< div třída = 'slds-p-around_medium' >
Informace přijaté velkými písmeny - < b > {informace} < / b < br >
Informace přijaté malými písmeny - < b > {informace2} < / b >
< / div >
< / blesková karta>
< / šablona>
Výstup:
Přidejte tyto dvě součásti na svou stránku. Ujistěte se, že jsou obě součásti na stejné stránce. Jinak funkce nebude fungovat.
Zadejte nějaký text do komponenty „Publikovat“ a klikněte na tlačítko „Odeslat data“. Vidíme, že text je přijímán velkými a malými písmeny.
Závěr
Nyní jsme schopni komunikovat s komponentami LWC prostřednictvím konceptu událostí v Salesforce LWC. V rámci této příručky jsme se naučili komunikovat od rodiče k dítěti a od dítěte k rodiči. Model PubSub se používá v případě, že vaše komponenty spolu nesouvisí (nikoli Parent – Child). Každý scénář je vysvětlen na jednoduchém příkladu a ujistěte se, že jste do souboru „meta-xml“ zahrnuli kód, který je uveden na začátku této příručky.