Ereignisse in LWC werden zur Kommunikation mit den Komponenten verwendet. Wenn verwandte Komponenten vorhanden sind, kann eine Kommunikation von Eltern zu Kind oder von Kind zu Eltern möglich sein. Wenn es zwei voneinander unabhängige Komponenten gibt, können wir über das PubSub-Modell (Publish-Subscribe) oder mit dem Lightning Message Service (LMS) kommunizieren. In diesem Leitfaden besprechen wir die Kommunikation mit Ereignissen von Parent zu Child, Child zu Parent und miteinander verbundenen Komponenten mithilfe des PubSub-Modells.
Sie können die Komponenten auf Ihrer Datensatzseite, App-Seite oder Homepage platzieren. Diese Datei (meta-xml) werden wir unter den Beispiel-Codeschnipseln nicht noch einmal angeben:
XML-Version = „1,0“ ?>
< LightningComponentBundle xmlns = „http://soap.sforce.com/2006/04/metadata“ >
< apiVersion > 57,0 apiVersion >
< ist entblößt > WAHR ist entblößt >
< Ziele >
< Ziel > lightning__RecordPage Ziel >
< Ziel > Lightning__AppPage Ziel >
< Ziel > Lightning__HomePage Ziel >
Ziele >
LightningComponentBundle >
Eltern-Kind-Kommunikation
Wenn zwei Komponenten miteinander in Beziehung stehen, ist diese Kommunikation möglich. Hier sendet der Elternteil die Daten an das Kind. Die übergeordnete Komponente enthält die untergeordnete Komponente. Mit diesem Ansatz können wir die primitiven Daten (Ganzzahl, Zeichenfolge, Boolescher Wert usw.) vom übergeordneten Element an das untergeordnete Element übergeben, die nicht-primitiven Daten (Array, Objekt, Objektarray usw.) vom übergeordneten Element an das untergeordnete Element übergeben und die Daten an das untergeordnete Element übergeben die Child-Komponente mit der Aktion für die Parent-Komponente.
Um die Parent-zu-Child-Komponente zu kommunizieren, müssen wir die in der Child-Komponente verfügbaren Felder, Eigenschaften und Methoden öffentlich sichtbar machen. Dies kann möglich sein, indem die Felder, Eigenschaften und Methoden mit dem „API“-Dekorator dekoriert werden.
Beispiel : Deklarieren Sie eine Variable mit „api“ in der „js“-Datei der untergeordneten Komponente.
@ API-Variable ;
Jetzt verwendet die übergeordnete Komponente die untergeordnete Komponente in der HTML-Datei über die HTML-Attribute.
Beispiel : Verwenden Sie die Variable in der übergeordneten HTML-Datei.
< C - Kind - comp-Variable > C - Kind - komp >
Lassen Sie uns einige Beispiele besprechen, die beschreiben, wie man mit „Parent to Child“ kommuniziert.
Beispiel 1:
Dieses einfache Beispiel zeigt, wie Informationen abgerufen werden, die vom Elternteil an das Kind gesendet werden.
childtComp.js
Zuerst erstellen wir eine untergeordnete Komponente, die die öffentlich verfügbare Variable „Information“ enthält.
// Deklarieren Sie die Variable mithilfe des API-Decorators als öffentlich@ API-Informationen
Den gesamten „js“-Code können Sie im folgenden Screenshot sehen:
childtComp.html
Jetzt geben wir diese Variable in der HTML-Datei innerhalb des Center-Tags an.
< Vorlage >< Blitz - Kartentitel = 'Kind' >
< Center >