Gli eventi in LWC vengono utilizzati per comunicare con i componenti. Se sono presenti componenti correlati, è possibile comunicare da Genitore a Figlio o da Figlio a Genitore. Se sono presenti due componenti non correlati, possiamo comunicare tramite il modello PubSub (Publish-Subscribe) o con il Lightning Message Service (LMS). In questa guida discuteremo su come comunicare con eventi da genitore a figlio, da figlio a genitore e componenti correlati utilizzando il modello PubSub.
Puoi posizionare i componenti nella pagina record, nella pagina app o nella home page. Non specificheremo nuovamente questo file (meta-xml) negli snippet di codice di esempio:
versione xml = '1.0' ?>
< LightningComponentBundlexmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< è esposto > VERO è esposto >
< obiettivi >
< bersaglio > fulmine__RecordPage bersaglio >
< bersaglio > fulmine__AppPage bersaglio >
< bersaglio > fulmine__HomePage bersaglio >
obiettivi >
LightningComponentBundle >
Comunicazione genitore-figlio
Se due componenti sono correlati tra loro, questa comunicazione è possibile. Qui, il Genitore invia i dati al Bambino. Il componente genitore contiene il componente figlio. Con questo approccio, possiamo passare i dati primitivi (intero, stringa, booleano, ecc.) da genitore a figlio, passare i dati non primitivi (array, oggetto, array di oggetti, ecc.) da genitore a figlio, passando i dati a il componente Figlio con l'azione sul Genitore.
Per comunicare il genitore al figlio, dobbiamo rendere visibili pubblicamente i campi, le proprietà e i metodi disponibili nel componente Figlio. Ciò è possibile decorando campi, proprietà e metodi con il decoratore “api”.
Esempio : dichiara una variabile con 'api' nel file 'js' del componente figlio.
@ variabile API ;
Ora, il componente Parent utilizza il componente Child nel file HTML tramite gli attributi HTML.
Esempio : utilizza la variabile nel file HTML principale.
< C - bambino - variabile comp > C - bambino - comp >
Discutiamo alcuni esempi che descrivono come comunicare da genitore a figlio.
Esempio 1:
Questo esempio di base dimostra come ottenere un'informazione inviata dal genitore al figlio.
childtComp.js
Innanzitutto, creiamo un componente figlio che contiene la variabile 'informazioni' che è disponibile pubblicamente.
// Dichiara la variabile come pubblica utilizzando l'API Decorator@ informazioni sull'API
Puoi visualizzare l'intero codice 'js' nella seguente schermata:
childtComp.html
Ora specifichiamo questa variabile nel file HTML all'interno del tag center.
< modello >< fulmine - titolo della carta = 'Bambino' >
< centro >
< B > { informazione } B >
centro >
fulmine - carta >
modello >
parentComp.js
Non stiamo facendo nulla nel file 'js'.
genitoreComp.html
Inserisci il componente Child precedente nel tuo HTML genitore passando la variabile pubblica (informazioni) con del testo.
< modello >< fulmine - titolo della carta = 'Genitore' icona - nome = 'standard:account' >
< C - bambino - comp
informazione = 'Buongiorno, ho ricevuto informazioni...'
> C - bambino - comp >
fulmine - carta >
modello >
Produzione:
Ora vai alla tua organizzazione Salesforce e posiziona il componente principale nella pagina 'Record'. Vedrai che il componente Figlio ha ricevuto le informazioni dal Genitore.
Esempio 2:
Creiamo due campi di testo di input che accetteranno il testo dinamicamente dall'interfaccia utente nel componente principale. Se inseriamo il primo testo nel componente Parent, il componente figlio riceve questo testo in maiuscolo. Allo stesso modo riceve il testo in minuscolo se inseriamo il secondo testo.
childtComp.js
Crea due variabili – information1 e information2 – con un decoratore di tracce.
- Crea il metodo convertToUpper() con il decoratore 'api' che converte il primo testo di input in maiuscolo.
- Crea il metodo convertToLower() con il decoratore 'api' che converte il secondo testo di input in minuscolo.
@ tenere traccia delle informazioni2 ;
@ API
convertToUpper ( informazioni effettive1 ) {
Questo . Informazioni1 = informazioni effettive1. toUpperCase ( ) ;
}
@ API
convertToLower ( informazioni effettive1 ) {
Questo . Informazioni2 = informazioni effettive1. inLowerCase ( ) ;
}
L'intero codice 'js' è simile al seguente:
childtComp.html
Visualizziamo i valori (Information1 e Information2) che provengono dal file 'js'.
< modello >< fulmine - titolo della carta = 'Bambino' >
Maiuscolo :& nbsp ; < B > { Informazioni1 } B >< fratello >
Minuscolo :& nbsp ; < B > { Informazioni2 } B >
fulmine - carta >
modello >
parentComp.js
Creiamo due metodi di gestione che selezionano il modello HTML figlio tramite querySelector(). Assicurati di dover passare i metodi corretti per convertire il testo in maiuscolo o minuscolo.
handleEvent1 ( evento ) {Questo . modello . querySelector ( 'c-childt-comp' ) . convertToUpper ( evento. bersaglio . valore ) ;
}
handleEvent2 ( evento ) {
Questo . modello . querySelector ( 'c-childt-comp' ) . convertToLower ( evento. bersaglio . valore ) ;
}
L'intero codice 'js' è simile al seguente:
genitoreComp.html
Crea un testo di input con gestire gli eventi per entrambi. Posiziona il componente figlio in questo componente genitore.
< modello >< fulmine - titolo della carta = 'Genitore' >
< centro >
< fulmine - etichetta di ingresso = 'Inserisci il testo in minuscolo' onchange = { handleEvent1 } > fulmine - ingresso >
centro >
< fratello >< fratello >
< centro >
< fulmine - etichetta di ingresso = 'Inserisci il testo in maiuscolo' onchange = { handleEvent2 } > fulmine - ingresso >
centro >
< fratello >< fratello >< fratello >
< C - bambino - comp > C - bambino - comp >
fulmine - carta >
modello >
Produzione:
Ora vai alla tua organizzazione Salesforce e posiziona il componente principale nella pagina 'Record'.
Vedrai due input di testo sull'interfaccia utente.
Scriviamo del testo nel primo input e vedrai che il testo viene convertito in maiuscolo e viene visualizzato nel componente Figlio.
Scrivi del testo nel secondo input e vedrai che il testo viene convertito in minuscolo e viene visualizzato nel componente Figlio.
Comunicazione da bambino a genitore
Similmente alla comunicazione precedente, per comunicare dal Bambino al Genitore, entrambe le componenti dovrebbero relazionarsi tra loro. Possiamo comunicare dal Bambino al Genitore in tre diversi approcci: chiamare il Genitore al Bambino utilizzando un semplice evento e chiamare il Genitore al Bambino utilizzando un evento con i dati e l'evento in bubbling. Esamineremo l'evento semplice in questa guida.
Per poter comunicare dal Bambino al Genitore, dobbiamo creare e inviare gli eventi. Per questo è necessario creare un evento personalizzato. Un evento personalizzato è un evento creato da te. Possiamo crearlo utilizzando la nuova parola chiave. Event_Name può essere qualsiasi cosa (può essere una stringa, non oltre le maiuscole, o cifre). Per ora non discuteremo delle opzioni.
Sintassi : nuovo CustomEvent('Event_Name',{opzioni...})
Ora hai l'evento personalizzato. Il passaggio successivo consiste nell'inviare l'evento. Per inviare l'evento, dobbiamo specificare l'evento che abbiamo creato nel metodo EventTarget.dispatchEvent().
Sintassi : this.displatchEvent(new CustomEvent('Event_Name',{options…})
Infine, dobbiamo gestire l'evento. Ora dobbiamo chiamare il componente figlio nel componente Genitore. Passa il nome dell'evento specificando il prefisso 'on' al nome dell'evento. Questo accetta il gestore del listener di eventi.
Sintassi:
< C - bambino - componente onyourEventName = { listenerHandler } > C - bambino - componente >Esempio:
In questo esempio creiamo un componente genitore (exampleParent) e due componenti figlio.
- Nel primo Child (exampleChild), creiamo un testo di input che consente all'utente di fornire del testo. Lo stesso testo viene visualizzato nel componente Parent in maiuscolo.
- Nel secondo Child (child2), creiamo un testo di input che consente all'utente di fornire del testo. Lo stesso testo viene visualizzato nel componente Parent in minuscolo.
esempioChild.js
Creiamo un metodo handleChange1 che crea il CustomEvent 'linuxhintevent1' con i dettagli come valore target. Successivamente, inviamo questo evento. Incorpora il seguente snippet in questo file 'js'.
// gestisce l'eventohandleCambia1 ( evento ) {
evento. preventDefault ( ) ;
cost nome1 = evento. bersaglio . valore ;
cost selezionaEvento1 = nuovo Evento personalizzato ( 'linuxhintevent1' , {
dettaglio : nome1
} ) ;
Questo . dispatchEvent ( selezionaEvento1 ) ;
}
esempioChild.html
Il metodo di gestione precedente creato in 'js' viene gestito in base all'input Lightning nel componente HTML.
< modello >< fulmine - titolo della carta = 'Bambino 1' >
< div classe = 'slds-m-around_medium' >
< fulmine - etichetta di input = 'Inserisci testo in minuscolo' onchange = { handleCambia1 } > fulmine - ingresso >
div >
fulmine - carta >
modello >
child2.js
Creiamo un metodo handleChange2 che crea il CustomEvent “linuxhintevent2” con il dettaglio come valore target. Successivamente, inviamo questo evento.
handleCambia2 ( evento ) {evento. preventDefault ( ) ;
cost nome2 = evento. bersaglio . valore ;
cost selezionaEvento2 = nuovo Evento personalizzato ( 'linuxhintevent2' , {
dettaglio : nome2
} ) ;
Questo . dispatchEvent ( selezionaEvento2 ) ;
}
bambino2.html
Il metodo di gestione precedente creato in 'js' viene gestito in base all'input Lightning nel componente HTML.
< modello >< fulmine - titolo della carta = 'Bambino 2' >
< div classe = 'slds-m-around_medium' >
< fulmine - etichetta di input = 'Inserisci testo in maiuscolo' onchange = { handleCambia2 } > fulmine - ingresso >
div >
fulmine - carta >
modello >
esempioParent.js: Incorpora questo snippet nel tuo file 'js' all'interno della classe.
- Converti l'input in maiuscolo utilizzando la funzione toUpperCase() in handleEvent1() e memorizzalo nella variabile Information1
- Converti l'input in minuscolo utilizzando la funzione toLowerCase() in handleEvent2() e memorizzalo nella variabile Information2.
// Converte l'input in maiuscolo utilizzando la funzione toUpperCase()
// in handleEvent1() e memorizza nella variabile Information1
handleEvent1(evento) {
const input1 = evento.dettaglio;
this.Information1 = input1.toUpperCase();
}
@Traccia Informazioni2;
// Converte l'input in lettere minuscole utilizzando la funzione toLowerCase()
// in handleEvent2() e memorizza nella variabile Information2
handleEvent2(evento) {
const input2 = evento.dettaglio;
this.Information2 = input2.toLowerCase();
}
esempioParent.html
Ora, visualizza le due variabili (Informazioni1 e Informazioni2) nel componente HTML genitore specificando entrambi i componenti figlio.
< div classe = 'slds-m-around_medium' >
Messaggio bambino-1 in maiuscolo: < B > {Informazioni1} < / B >< fratello >
Messaggio bambino-2 in minuscolo: < B > {Informazioni2} < / B >< fratello >
< / B >< fratello >
< / div >
< / carta-fulmine>
< / modello>
Produzione:
Ora vai alla tua organizzazione Salesforce e posiziona il componente principale nella pagina 'Record'.
Puoi vedere che esistono due componenti Child nel Parent.
Digitiamo del testo nel testo di input sotto il componente Figlio 1. Possiamo vedere che il nostro testo viene visualizzato in maiuscolo sul componente Parent.
Fornisci del testo nel testo di input sotto il componente Child 2. Possiamo vedere che il nostro testo viene visualizzato in minuscolo sul componente Parent.
È anche possibile inserire entrambi i testi contemporaneamente.
Modello PubSub
Quando lavori con componenti indipendenti (non correlati tra loro) e se desideri inviare le informazioni da un componente a un altro, puoi utilizzare questo modello. PubSub sta per Pubblica e Sottoscrivi. Il componente che invia i dati è noto come Editore e il componente che riceve i dati è noto come Sottoscrittore. È necessario utilizzare il modulo pubsub per inviare gli eventi tra i componenti. È già predefinito e fornito da Salesforce. Il nome del file è pubsub. Devi creare un componente LWC e digitare questo codice nel tuo file javascript che è 'pubsub.js'.
Esempio:
Creiamo due componenti: Pubblica e Sottoscrivi.
In Pubblica, consentiamo agli utenti di creare un testo di input. Facendo clic sul pulsante, i dati vengono ricevuti in maiuscolo e minuscolo nel componente Iscriviti.
pubblicare.js
Incorpora questo codice nel tuo file JSON. Qui, otteniamo le informazioni e pubblichiamo le informazioni.
La variabile informazione sarà maiuscola e l'informazione1 sarà minuscola. Assicurati di includere questa istruzione di importazione all'inizio del codice: importa pubsub da 'c/pubsub'.
informazioneinformazioni2
// Ottieni le informazioni in maiuscolo e minuscolo
informationHandler ( evento ) {
Questo . informazione = evento. bersaglio . valore ;
Questo . informazioni2 = evento. bersaglio . valore ;
}
// Pubblica entrambe le informazioni (in maiuscolo e minuscolo)
pubblicareHandler ( ) {
pubsub. pubblicare ( 'Pubblicare' , Questo . informazione )
pubsub. pubblicare ( 'Pubblicare' , Questo . informazioni2 )
}
Dovrebbe assomigliare a:
pubblicare.html
Per prima cosa creiamo l'input Lightning per accettare il testo con le informazioni del gestore. Successivamente, viene creato un pulsante con la funzionalità onclick. Queste funzioni si trovano nel precedente snippet di codice 'js'.
< / carta-fulmine>
< / modello>
iscriviti.js
Incorpora questo codice nel tuo file JSON. Qui, per prima cosa sottoscriviamo le informazioni convertendole in maiuscolo e minuscolo separatamente all'interno del metodo callSubscriber(). Successivamente, invochiamo questo metodo tramite il metodo connectcallback(). Assicurati di includere questa istruzione di importazione all'inizio del codice: importa pubsub da 'c/pubsub'.
informazioneinformazioni2
// richiamando callSubscriber()
connessoRichiamata ( ) {
Questo . callSubscriber ( )
}
// Sottoscrive le informazioni convertendole in maiuscolo
callSubscriber ( ) {
pubsub. sottoscrivi ( 'Pubblicare' , ( informazione ) => {
Questo . informazione = informazione. toUpperCase ( ) ;
} ) ,
// Sottoscrive le informazioni convertendole in minuscolo
pubsub. sottoscrivi ( 'Pubblicare' , ( informazioni2 ) => {
Questo . informazioni2 = informazioni2. inLowerCase ( ) ;
} )
}
Dovrebbe sembrare come questo:
iscriviti.html
Visualizziamo il testo in maiuscolo (memorizzato in information) e minuscolo (memorizzato in information2).
< div classe = 'slds-p-around_medium' >
Informazioni ricevute in maiuscolo - < B > {informazione} < / B >< fratello >
Informazioni ricevute in minuscolo - < B > {informazioni2} < / B >
< / div >
< / carta-fulmine>
< / modello>
Produzione:
Aggiungi questi due componenti alla tua pagina. Assicurati che entrambi i componenti siano sulla stessa pagina. Altrimenti, la funzionalità non funzionerà.
Inseriamo del testo nel componente 'Pubblica' e facciamo clic sul pulsante 'Invia dati'. Possiamo vedere che il testo viene ricevuto in maiuscolo e minuscolo.
Conclusione
Ora siamo in grado di comunicare con i componenti LWC attraverso il concetto di evento in Salesforce LWC. Nell'ambito di questa guida, abbiamo imparato come comunicare dal Genitore al Bambino e dal Bambino al Genitore. Il modello PubSub viene utilizzato nel caso in cui i componenti non siano correlati tra loro (non Parent – Child). Ogni scenario è spiegato con un semplice esempio e assicurati di includere il codice fornito all'inizio di questa guida nel file 'meta-xml'.