Els esdeveniments a LWC s'utilitzen per comunicar-se amb els components. Si hi ha components relacionats, pot ser possible comunicar-se de pare a fill o fill a pare. Si hi ha dos components no relacionats, ens podem comunicar mitjançant el model PubSub (Publicar-Subscriure) o amb el Lightning Message Service (LMS). En aquesta guia, parlarem sobre com comunicar-nos amb esdeveniments de pare a fill, fill a pare i components interrelacionats mitjançant el model PubSub.
Podeu col·locar els components a la vostra pàgina de registre, pàgina d'aplicació o pàgina d'inici. No especificarem aquest fitxer (meta-xml) de nou als fragments de codi d'exemple:
versió xml = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< està exposat > veritat està exposat >
< objectius >
< objectiu > lightning__RecordPage objectiu >
< objectiu > lightning__AppPage objectiu >
< objectiu > llamp__Pàgina d'inici objectiu >
objectius >
LightningComponentBundle >
Comunicació pares a fills
Si dos components estan relacionats entre si, aquesta comunicació és possible. Aquí, el pare envia les dades al nen. El component pare conté el component Fill. Amb aquest enfocament, podem passar les dades Primitives (Enter, String, Boolean, etc.) de Parent a Child, passar les dades No Primitives (Array, Object, Array of Objects, etc.) de Parent a Child, passant les dades a el component Fill amb l'acció sobre el Pare.
Per tal de comunicar el pare al fill, hem de fer visibles públicament els camps, les propietats i els mètodes disponibles al component Fill. Això pot ser possible decorant els camps, les propietats i els mètodes amb el decorador 'api'.
Exemple : Declara una variable amb 'api' al fitxer 'js' del component Child.
@ variable api ;
Ara, el component Parent utilitza el component Fill al fitxer HTML mitjançant els atributs HTML.
Exemple : Utilitzeu la variable al fitxer HTML principal.
< c - nen - variable comp > c - nen - comp >
Comentem alguns exemples que descriuen com comunicar-se amb pares a fills.
Exemple 1:
Aquest exemple bàsic demostra l'obtenció d'una informació enviada pel pare al nen.
childtComp.js
Primer, creem un component Child que conté la variable 'informació' que està disponible públicament.
// Declara la variable com a pública utilitzant l'API Decorator@ informació de l'API
Podeu veure tot el codi 'js' a la següent captura de pantalla:
childtComp.html
Ara, especifiquem aquesta variable al fitxer HTML dins de l'etiqueta central.
< plantilla >< llamp - títol de la targeta = 'nen' >
< centre >
< b > { informació } b >
centre >
llamp - targeta >
plantilla >
parentComp.js
No estem fent res al fitxer 'js'.
parentComp.html
Col·loqueu el component Child anterior al vostre HTML principal passant la variable pública (informació) amb una mica de text.
< plantilla >< llamp - títol de la targeta = 'Pare' icona - nom = 'estàndard:compte' >
< c - nen - comp
informació = 'Hola, he rebut informació...'
> c - nen - comp >
llamp - targeta >
plantilla >
Sortida:
Ara, aneu a la vostra organització de Salesforce i col·loqueu el component Parent a la pàgina 'Registre'. Veureu que el component Fill ha rebut la informació del pare.
Exemple 2:
Creem dos camps de text d'entrada que acceptin el text de manera dinàmica des de la interfície d'usuari al component Parent. Si inserim el primer text al component Parent, el component fill rep aquest text en majúscules. De la mateixa manera, rep el text en minúscula si inserim el segon text.
childtComp.js
Creeu dues variables –informació1 i informació2– amb un decorador de pistes.
- Creeu el mètode convertToUpper() amb el decorador 'api' que converteix el primer text d'entrada a majúscules.
- Creeu el mètode convertToLower() amb el decorador 'api' que converteix el segon text d'entrada en minúscules.
@ Informació de la pista 2 ;
@ api
convertToUpper ( informació actual 1 ) {
això . Informació 1 = informació actual 1. a majúscules ( ) ;
}
@ api
convertToLower ( informació actual 1 ) {
això . Informació 2 = informació actual 1. aMinúscules ( ) ;
}
Tot el codi 'js' té l'aspecte següent:
childtComp.html
Mostrem els valors (Informació1 i Informació2) que provenen del fitxer “js”.
< plantilla >< llamp - títol de la targeta = 'nen' >
Majúscula :& nbsp ; < b > { Informació 1 } b >< br >
Minúscula :& nbsp ; < b > { Informació 2 } b >
llamp - targeta >
plantilla >
parentComp.js
Creem dos mètodes de controlador que seleccionen la plantilla HTML secundària mitjançant el querySelector(). Assegureu-vos que heu de passar els mètodes correctes per convertir el text en majúscules o minúscules.
handleEvent1 ( esdeveniment ) {això . plantilla . querySelector ( 'c-childt-comp' ) . convertToUpper ( esdeveniment. objectiu . valor ) ;
}
handleEvent2 ( esdeveniment ) {
això . plantilla . querySelector ( 'c-childt-comp' ) . convertToLower ( esdeveniment. objectiu . valor ) ;
}
Tot el codi 'js' té l'aspecte següent:
parentComp.html
Creeu un text d'entrada amb esdeveniments de control per a tots dos. Col·loqueu el component Fill en aquest component Parent.
< plantilla >< llamp - títol de la targeta = 'Pare' >
< centre >
< llamp - etiqueta d'entrada = 'Introdueix el text en minúscules' al canvi = { handleEvent1 } > llamp - entrada >
centre >
< br >< br >
< centre >
< llamp - etiqueta d'entrada = 'Introdueix el text en majúscules' al canvi = { handleEvent2 } > llamp - entrada >
centre >
< br >< br >< br >
< c - nen - comp > c - nen - comp >
llamp - targeta >
plantilla >
Sortida:
Ara, aneu a la vostra organització de Salesforce i col·loqueu el component Parent a la pàgina 'Registre'.
Veureu dues entrades de text a la interfície d'usuari.
Escrivim una mica de text a la primera entrada i veureu que el text es converteix en majúscules i es mostra al component Fill.
Escriviu text a la segona entrada i veureu que el text es converteix en minúscules i es mostra al component Fill.
Comunicació fill-parent
De manera semblant a la comunicació anterior, per comunicar el nen als pares, ambdós components s'han de relacionar entre ells. Podem comunicar el nen al pare amb tres enfocaments diferents: trucant al pare al nen mitjançant un esdeveniment senzill i trucant al pare al nen mitjançant un esdeveniment amb les dades i l'esdeveniment que bullen. Veurem l'esdeveniment senzill en aquesta guia.
Per tal de comunicar el nen als pares, hem de crear i enviar els esdeveniments. Per això, s'ha de crear un esdeveniment personalitzat. Un esdeveniment personalitzat és un esdeveniment creat per tu mateix. El podem crear amb la paraula clau nova. Event_Name pot ser qualsevol cosa (pot ser una cadena, no més enllà de les majúscules, o els dígits). De moment, no parlarem de les opcions.
Sintaxi : new CustomEvent('Nom_Event',{opcions...})
Ara teniu l'esdeveniment personalitzat. El següent pas és enviar l'esdeveniment. Per enviar l'esdeveniment, hem d'especificar l'esdeveniment que hem creat al mètode EventTarget.dispatchEvent().
Sintaxi : this.displatchEvent(new CustomEvent('Event_Name',{options...})
Finalment, hem de gestionar l'esdeveniment. Ara, hem d'anomenar el component fill del vostre component Parent. Passeu el nom del vostre esdeveniment especificant el prefix 'activat' al nom del vostre esdeveniment. Això pren el controlador d'escolta d'esdeveniments.
Sintaxi:
< c - nen - component al vostreEventName = { ListenerHandler } > c - nen - component >Exemple:
En aquest exemple, creem un component Parent (exampleParent) i dos components Child.
- En el primer Child (exempleChild), creem un text d'entrada que permet a l'usuari proporcionar algun text. El mateix text es mostra al component Parent en majúscules.
- En el segon Child (child2), creem un text d'entrada que permet a l'usuari proporcionar algun text. El mateix text es mostra al component Parent en minúscula.
exempleChild.js
Creem un mètode handleChange1 que crea l'esdeveniment personalitzat 'linuxhintevent1' amb el detall com a valor objectiu. Després d'això, enviem aquest esdeveniment. Insereix el fragment següent en aquest fitxer 'js'.
// gestionar l'esdevenimenthandleChange1 ( esdeveniment ) {
esdeveniment. preventDefault ( ) ;
const nom 1 = esdeveniment. objectiu . valor ;
const selectEvent1 = nou Esdeveniment personalitzat ( 'linuxhintevent1' , {
detall : nom 1
} ) ;
això . dispatchEvent ( selectEvent1 ) ;
}
exampleChild.html
El mètode de control anterior que es crea a 'js' es gestiona en funció de l'entrada de llum del component HTML.
< plantilla >< llamp - títol de la targeta = 'Nen 1' >
< div classe = 'slds-m-around_medium' >
< llamp - etiqueta d'entrada = 'Introdueix el text en minúscules' al canvi = { handleChange1 } > llamp - entrada >
div >
llamp - targeta >
plantilla >
fill2.js
Creem un mètode handleChange2 que crea el CustomEvent 'linuxhintevent2' amb el detall com a valor objectiu. Després d'això, enviem aquest esdeveniment.
handleChange2 ( esdeveniment ) {esdeveniment. preventDefault ( ) ;
const nom 2 = esdeveniment. objectiu . valor ;
const selectEvent2 = nou Esdeveniment personalitzat ( 'linuxhintevent2' , {
detall : nom 2
} ) ;
això . dispatchEvent ( selectEvent2 ) ;
}
nen2.html
El mètode de control anterior que es crea a 'js' es gestiona en funció de l'entrada de llum del component HTML.
< plantilla >< llamp - títol de la targeta = 'Nen 2' >
< div classe = 'slds-m-around_medium' >
< llamp - etiqueta d'entrada = 'Introdueix el text en majúscules' al canvi = { handleChange2 } > llamp - entrada >
div >
llamp - targeta >
plantilla >
exampleParent.js: Insereix aquest fragment al fitxer 'js' dins de la classe.
- Converteix l'entrada a majúscules mitjançant la funció toUpperCase() a handleEvent1() i emmagatzema-la a la variable Information1
- Converteix l'entrada en minúscules utilitzant la funció toLowerCase() a handleEvent2() i emmagatzema-la a la variable Information2.
// Converteix l'entrada a majúscules mitjançant la funció toUpperCase().
// al handleEvent1() i emmagatzema a la variable Information1
handleEvent1(esdeveniment) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Converteix l'entrada en minúscules utilitzant la funció toLowerCase().
// al handleEvent2() i emmagatzema a la variable Information2
handleEvent2(esdeveniment) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Ara, mostreu les dues variables (Informació1 i Informació2) al component HTML principal especificant els dos components secundaris.
< div classe = 'slds-m-around_medium' >
Missatge Child-1 en majúscules: < b > {Informació1} < / b >< br >
Missatge Child-2 en minúscules: < b > {Informació2} < / b >< br >
< / b >< br >
< / div >
< / targeta-llamp>
< / plantilla>
Sortida:
Ara, aneu a la vostra organització de Salesforce i col·loqueu el component Parent a la pàgina 'Registre'.
Podeu veure que hi ha dos components fills al pare.
Escrivim una mica de text al text d'entrada sota el component Child 1. Podem veure que el nostre text es mostra en majúscules al component Parent.
Doneu una mica de text al text d'entrada sota el component Child 2. Podem veure que el nostre text es mostra en minúscules al component Parent.
També pot ser possible introduir els dos textos alhora.
Model PubSub
Quan treballeu amb components independents (no relacionats entre ells) i si voleu enviar la informació d'un component a un altre, podeu utilitzar aquest model. PubSub significa Publish and Subscribe. El component que envia les dades es coneix com a editor i el component que rep les dades es coneix com a subscriptor. Cal utilitzar el mòdul pubsub per enviar els esdeveniments entre els components. Ja està predefinit i donat per Salesforce. El nom del fitxer és pubsub. Heu de crear un component LWC i escriure aquest codi al vostre fitxer javascript que és 'pubsub.js'.
Exemple:
Creem dos components: publicar i subscriure-us.
A Publicar, permetem als usuaris crear un text d'entrada. En fer clic al botó, les dades es reben en majúscules i minúscules al component Subscriure.
publish.js
Incrusta aquest codi al teu fitxer JSON. Aquí obtenim la informació i la publiquem.
La variable d'informació estarà en majúscula i la informació1 en minúscula. Assegureu-vos d'incloure aquesta declaració d'importació a l'inici del codi: import pubsub des de 'c/pubsub'.
informacióinformació 2
// Obteniu la informació en majúscules i minúscules
Gestor d'informació ( esdeveniment ) {
això . informació = esdeveniment. objectiu . valor ;
això . informació 2 = esdeveniment. objectiu . valor ;
}
// Publicar tant la informació (en majúscules com en minúscules)
publishHandler ( ) {
pubsub. publicar ( 'Publicar' , això . informació )
pubsub. publicar ( 'Publicar' , això . informació 2 )
}
Hauria de semblar:
publicar.html
Primer, creem l'entrada lightning per acceptar el text amb la informació del controlador. Després d'això, es crea un botó amb la funcionalitat onclick. Aquestes funcions es troben a l'anterior fragment de codi 'js'.
< / targeta-llamp>
< / plantilla>
subscriu-te.js
Incrusta aquest codi al teu fitxer JSON. Aquí, primer subscrivim la informació convertint-la en majúscules i minúscules per separat dins del mètode callSubscriber(). Després d'això, invoquem aquest mètode mitjançant el mètode connectatcallback(). Assegureu-vos d'incloure aquesta declaració d'importació a l'inici del codi: import pubsub des de 'c/pubsub'.
informacióinformació 2
// invocant el callSubscriber()
Devolució de trucada connectada ( ) {
això . truca al subscriptor ( )
}
// Subscriu la informació convertint-la en majúscules
truca al subscriptor ( ) {
pubsub. subscriu-te ( 'Publicar' , ( informació ) => {
això . informació = informació. a majúscules ( ) ;
} ) ,
// Subscriu la informació convertint-la en minúscules
pubsub. subscriu-te ( 'Publicar' , ( informació 2 ) => {
això . informació 2 = informació 2. aMinúscules ( ) ;
} )
}
Hauria de ser així:
subscriu-te.html
Mostrem el text en majúscules (emmagatzemat a la informació) i en minúscula (emmagatzemat a la informació2).
< div classe = 'slds-p-around_medium' >
Informació rebuda en majúscules - < b > {informació} < / b >< br >
Informació rebuda en minúscula - < b > {informació2} < / b >
< / div >
< / targeta-llamp>
< / plantilla>
Sortida:
Afegiu aquests dos components a la vostra pàgina. Assegureu-vos que els dos components estiguin a la mateixa pàgina. En cas contrari, la funcionalitat no funcionarà.
Introduïm text al component 'Publica' i fes clic al botó 'Envia dades'. Podem veure que el text es rep en majúscules i minúscules.
Conclusió
Ara, podem comunicar-nos amb els components de LWC mitjançant el concepte d'esdeveniment a Salesforce LWC. Com a part d'aquesta guia, vam aprendre a comunicar-nos del pare al fill i del nen al pare. El model PubSub s'utilitza en cas que els vostres components no estiguin relacionats entre ells (no Parent – Fill). Cada escenari s'explica amb un exemple senzill i assegureu-vos d'incloure el codi que es proporciona a l'inici d'aquesta guia al fitxer 'meta-xml'.