Los eventos en LWC se utilizan para comunicarse con los componentes. Si hay componentes relacionados, es posible comunicarse de padre a hijo o de niño a padre. Si hay dos componentes no relacionados, podemos comunicarnos a través del modelo PubSub (Publish-Subscribe) o con Lightning Message Service (LMS). En esta guía, analizaremos cómo comunicarnos con eventos de padre a hijo, de hijo a padre y componentes interrelacionados utilizando el modelo PubSub.
Puede colocar los componentes en su página de registro, página de aplicación o página de inicio. No volveremos a especificar este archivo (meta-xml) en los fragmentos de código de ejemplo:
versión xml = '1.0' ?>
< xmlns del paquete LightningComponent = 'http://soap.sforce.com/2006/04/metadata' >
< versión api > 57.0 versión api >
< esta expuesto > verdadero esta expuesto >
< objetivos >
< objetivo > relámpago__RecordPage objetivo >
< objetivo > relámpago__AppPage objetivo >
< objetivo > relámpago__Página de inicio objetivo >
objetivos >
Paquete de componentes Lightning >
Comunicación de padres a hijos
Si dos componentes están relacionados entre sí, esta comunicación es posible. Aquí, el Padre envía los datos al Niño. El componente principal contiene el componente secundario. Con este enfoque, podemos pasar los datos primitivos (entero, cadena, booleano, etc.) de padre a hijo, pasar los datos no primitivos (matriz, objeto, matriz de objetos, etc.) de padre a hijo y pasar los datos a el componente Hijo con la acción en el Padre.
Para comunicar Padre a Hijo, debemos hacer que los campos, propiedades y métodos disponibles en el componente Hijo sean públicamente visibles. Esto puede ser posible decorando los campos, propiedades y métodos con el decorador 'api'.
Ejemplo : Declare una variable con “api” en el archivo “js” del componente secundario.
@ variable API ;
Ahora, el componente principal utiliza el componente secundario en el archivo HTML a través de los atributos HTML.
Ejemplo : Utilice la variable en el archivo HTML principal.
< C - niño - variable de compensación > C - niño - comp >
Analicemos algunos ejemplos que describen cómo comunicarse de padres a hijos.
Ejemplo 1:
Este ejemplo básico demuestra cómo obtener información enviada por el padre al niño.
childtComp.js
Primero, creamos un componente secundario que contiene la variable 'información' que está disponible públicamente.
// Declarar la variable como pública usando el decorador api@ información de la API
Puede ver el código 'js' completo en la siguiente captura de pantalla:
childtComp.html
Ahora, especificamos esta variable en el archivo HTML dentro de la etiqueta central.
< plantilla >< iluminación - título de la tarjeta = 'Niño' >
< centro >
< b > { información } b >
centro >
iluminación - tarjeta >
plantilla >
parentComp.js
No estamos haciendo nada en el archivo 'js'.
parentComp.html
Coloque el componente secundario anterior en su HTML principal pasando la variable pública (información) con algo de texto.
< plantilla >< iluminación - título de la tarjeta = 'Padre' icono - nombre = 'estándar: cuenta' >
< C - niño - comp
información = 'Hola, recibí información...'
> C - niño - comp >
iluminación - tarjeta >
plantilla >
Producción:
Ahora, vaya a su organización de Salesforce y coloque el componente principal en la página 'Registro'. Verá que el componente secundario recibió la información del principal.
Ejemplo 2:
Creemos dos campos de entrada de texto que aceptarán el texto dinámicamente desde la interfaz de usuario en el componente principal. Si insertamos el primer texto en el componente principal, el componente secundario recibe este texto en mayúsculas. Del mismo modo recibe el texto en minúsculas si insertamos el segundo texto.
childtComp.js
Cree dos variables (información1 e información2) con un decorador de pistas.
- Cree el método convertToUpper() con el decorador 'api' que convierte el primer texto de entrada a mayúsculas.
- Cree el método convertToLower() con el decorador 'api' que convierte el segundo texto de entrada a minúsculas.
@ información de seguimiento2 ;
@ API
convertir a superior ( información actual1 ) {
este . Información1 = información actual1. a mayúsculas ( ) ;
}
@ API
convertir a inferior ( información actual1 ) {
este . Información2 = información actual1. a minúsculas ( ) ;
}
El código 'js' completo se parece al siguiente:
childtComp.html
Desplegamos los valores (Información1 e Información2) que provienen del archivo “js”.
< plantilla >< iluminación - título de la tarjeta = 'Niño' >
Mayúsculas :& nbsp ; < b > { Información1 } b >< hermano >
Minúscula :& nbsp ; < b > { Información2 } b >
iluminación - tarjeta >
plantilla >
parentComp.js
Creamos dos métodos de controlador que seleccionan la plantilla HTML secundaria a través de querySelector(). Asegúrese de pasar los métodos correctos que conviertan el texto a mayúsculas o minúsculas.
manejarEvento1 ( evento ) {este . plantilla . selector de consulta ( 'c-childt-comp' ) . convertir a superior ( evento. objetivo . valor ) ;
}
manejarEvento2 ( evento ) {
este . plantilla . selector de consulta ( 'c-childt-comp' ) . convertir a inferior ( evento. objetivo . valor ) ;
}
El código 'js' completo se parece al siguiente:
parentComp.html
Cree un texto de entrada con eventos de manejo para ambos. Coloque el componente secundario en este componente principal.
< plantilla >< iluminación - título de la tarjeta = 'Padre' >
< centro >
< iluminación - etiqueta de entrada = 'Ingrese el texto en minúsculas' en cambio = { manejarEvento1 } > iluminación - aporte >
centro >
< hermano >< hermano >
< centro >
< iluminación - etiqueta de entrada = 'Ingrese el texto en mayúsculas' en cambio = { manejarEvento2 } > iluminación - aporte >
centro >
< hermano >< hermano >< hermano >
< C - niño - comp > C - niño - comp >
iluminación - tarjeta >
plantilla >
Producción:
Ahora, vaya a su organización de Salesforce y coloque el componente principal en la página 'Registro'.
Verá dos entradas de texto en la interfaz de usuario.
Escribamos algo de texto en la primera entrada y verá que el texto se convierte a mayúsculas y se muestra en el componente secundario.
Escriba algo de texto en la segunda entrada y verá que el texto se convierte a minúsculas y se muestra en el componente secundario.
Comunicación de niño a padre
De manera similar a la comunicación anterior, para comunicar el Niño a los Padres, ambos componentes deben relacionarse entre sí. Podemos comunicar el Niño al Padre en tres enfoques diferentes: llamar al Padre al Niño usando un evento simple y llamar al Padre al Niño usando un evento con los datos y el evento burbujeando. Veremos el evento simple en esta guía.
Para comunicar el Niño al Padre, necesitamos crear y enviar los eventos. Para eso, se debe crear un evento personalizado. Un evento personalizado es un evento creado por usted mismo. Podemos crearlo usando la nueva palabra clave. El Event_Name puede ser cualquier cosa (puede ser una cadena, no más allá de mayúsculas o dígitos). Por ahora, no discutiremos las opciones.
Sintaxis : nuevo CustomEvent('Event_Name',{opciones...})
Ahora tienes el evento personalizado. El siguiente paso es enviar el evento. Para enviar el evento, debemos especificar el evento que creamos en el método EventTarget.dispatchEvent().
Sintaxis : this.displatchEvent(new CustomEvent('Event_Name',{opciones...})
Finalmente, necesitamos manejar el evento. Ahora, tenemos que llamar al componente secundario en su componente principal. Pase el nombre de su evento especificando el prefijo 'on' al nombre de su evento. Esto requiere el controlador de escucha de eventos.
Sintaxis:
< C - niño - componente en su nombre de evento = { oyenteManejador } > C - niño - componente >Ejemplo:
En este ejemplo, creamos un componente principal (ejemploParent) y dos componentes secundarios.
- En el primer Niño (ejemploNiño), creamos un texto de entrada que permite al usuario proporcionar algo de texto. El mismo texto se muestra en el componente principal en mayúsculas.
- En el segundo Niño (niño2), creamos un texto de entrada que permite al usuario proporcionar algo de texto. El mismo texto se muestra en minúsculas en el componente principal.
ejemploChild.js
Creamos un método handleChange1 que crea el evento personalizado 'linuxhintevent1' con el detalle como valor objetivo. Después de eso, enviamos este evento. Incruste el siguiente fragmento en este archivo 'js'.
// manejar el eventomanejarCambiar1 ( evento ) {
evento. prevenir valor predeterminado ( ) ;
constante nombre1 = evento. objetivo . valor ;
constante seleccionarEvento1 = nuevo Evento personalizado ( 'linuxhintevent1' , {
detalle : nombre1
} ) ;
este . despachoEvento ( seleccionarEvento1 ) ;
}
ejemploChild.html
El método de manejo anterior que se crea en 'js' se maneja en función de la entrada del rayo en el componente HTML.
< plantilla >< iluminación - título de la tarjeta = 'Niño 1' >
< div clase = 'slds-m-around_medium' >
< iluminación - etiqueta de entrada = 'Ingrese texto en minúsculas' en cambio = { manejarCambiar1 } > iluminación - aporte >
div >
iluminación - tarjeta >
plantilla >
niño2.js
Creamos un método handleChange2 que crea el CustomEvent “linuxhintevent2” con el detalle como valor objetivo. Después de eso, enviamos este evento.
manejarCambiar2 ( evento ) {evento. prevenir valor predeterminado ( ) ;
constante nombre2 = evento. objetivo . valor ;
constante seleccionarEvento2 = nuevo Evento personalizado ( 'linuxhintevent2' , {
detalle : nombre2
} ) ;
este . despachoEvento ( seleccionarEvento2 ) ;
}
niño2.html
El método de manejo anterior que se crea en 'js' se maneja en función de la entrada del rayo en el componente HTML.
< plantilla >< iluminación - título de la tarjeta = 'Niño 2' >
< div clase = 'slds-m-around_medium' >
< iluminación - etiqueta de entrada = 'Ingrese texto en mayúsculas' en cambio = { manejarCambiar2 } > iluminación - aporte >
div >
iluminación - tarjeta >
plantilla >
ejemploParent.js: Incruste este fragmento en su archivo 'js' dentro de la clase.
- Convierta la entrada a mayúsculas usando la función toUpperCase() en handleEvent1() y guárdela en la variable Information1
- Convierta la entrada a minúsculas usando la función toLowerCase() en handleEvent2() y guárdela en la variable Information2.
// Convierte la entrada a mayúsculas usando la función toUpperCase()
// en handleEvent1() y almacena en la variable Information1
manejarEvento1(evento) {
const input1 = evento.detalle;
this.Información1 = input1.toUpperCase();
}
@información de pista2;
// Convierte la entrada a minúsculas usando la función toLowerCase()
// en handleEvent2() y almacenar en la variable Information2
manejarEvent2(evento) {
const input2 = evento.detalle;
this.Información2 = input2.toLowerCase();
}
ejemploParent.html
Ahora, muestre las dos variables (Información1 e Información2) en el componente HTML principal especificando ambos componentes secundarios.
< div clase = 'slds-m-around_medium' >
Mensaje Niño-1 en mayúsculas: < b > {Información1} < / b >< hermano >
Mensaje Niño-2 en minúsculas: < b > {Información2} < / b >< hermano >
< / b >< hermano >
< / div >
< / tarjeta-rayo>
< / plantilla>
Producción:
Ahora, vaya a su organización de Salesforce y coloque el componente principal en la página 'Registro'.
Puede ver que existen dos componentes secundarios en Parent.
Escribamos algo de texto en el texto de entrada debajo del componente Niño 1. Podemos ver que nuestro texto se muestra en mayúsculas en el componente principal.
Proporcione algo de texto en el texto de entrada debajo del componente Niño 2. Podemos ver que nuestro texto se muestra en minúsculas en el componente principal.
También es posible introducir ambos textos a la vez.
Modelo PubSub
Cuando estés trabajando con componentes independientes (no relacionados entre sí) y si quieres enviar la información de un componente a otro, puedes utilizar este modelo. PubSub significa Publicar y Suscribirse. El componente que envía los datos se conoce como publicador y el componente que recibe los datos se conoce como suscriptor. Es necesario utilizar el módulo pubsub para enviar los eventos entre los componentes. Ya está predefinido y proporcionado por Salesforce. El nombre del archivo es pubsub. Debe crear un componente LWC y escribir este código en su archivo javascript que es 'pubsub.js'.
Ejemplo:
Creemos dos componentes: publicar y suscribir.
En Publicar, permitimos a los usuarios crear un texto de entrada. Al hacer clic en el botón, los datos se reciben en mayúsculas y minúsculas en el componente Suscribir.
publicar.js
Incruste este código en su archivo JSON. Aquí obtenemos la información y la publicamos.
La variable de información estará en mayúsculas y la información1 estará en minúsculas. Asegúrese de incluir esta declaración de importación al comienzo del código: importe pubsub desde 'c/pubsub'.
informacióninformación2
//Obtener la información en mayúsculas y minúsculas
manejador de información ( evento ) {
este . información = evento. objetivo . valor ;
este . información2 = evento. objetivo . valor ;
}
// Publicar tanto la información (En mayúsculas como en minúsculas)
publicarHandler ( ) {
pubsub. publicar ( 'Publicar' , este . información )
pubsub. publicar ( 'Publicar' , este . información2 )
}
Debería verse así:
publicar.html
Primero, creamos la entrada relámpago para aceptar el texto con la información del controlador. Después de eso, se crea un botón con la funcionalidad onclick. Estas funciones se encuentran en el fragmento de código 'js' anterior.
< / tarjeta-rayo>
< / plantilla>
suscribirse.js
Incruste este código en su archivo JSON. Aquí, primero suscribimos la información convirtiéndola en mayúsculas y minúsculas por separado dentro del método callSubscriber(). Después de eso, invocamos este método a través del método connectcallback(). Asegúrese de incluir esta declaración de importación al comienzo del código: importe pubsub desde 'c/pubsub'.
informacióninformación2
// invocando callSubscriber()
conectadoDevolución de llamada ( ) {
este . llamarsuscriptor ( )
}
//Suscribe la información convirtiéndola a mayúsculas
llamarsuscriptor ( ) {
pubsub. suscribir ( 'Publicar' , ( información ) => {
este . información = información. a mayúsculas ( ) ;
} ) ,
//Suscribe la información convirtiéndola a minúsculas
pubsub. suscribir ( 'Publicar' , ( información2 ) => {
este . información2 = información2. a minúsculas ( ) ;
} )
}
Debe tener un aspecto como este:
suscribirse.html
Mostramos el texto en mayúsculas (almacenadas en información) y minúsculas (almacenadas en información2).
< div clase = 'slds-p-around_medium' >
Información recibida en mayúsculas - < b > {información} < / b >< hermano >
Información recibida en minúsculas - < b > {información2} < / b >
< / div >
< / tarjeta-rayo>
< / plantilla>
Producción:
Agregue estos dos componentes a su página. Asegúrese de que ambos componentes estén en la misma página. De lo contrario, la funcionalidad no funcionará.
Ingresemos algo de texto en el componente 'Publicar' y hagamos clic en el botón 'Enviar datos'. Podemos ver que el texto se recibe en mayúsculas y minúsculas.
Conclusión
Ahora podemos comunicarnos con los componentes de LWC a través del concepto de evento en Salesforce LWC. Como parte de esta guía, aprendimos cómo comunicarnos de padres a hijos y de hijos a padres. El modelo PubSub se utiliza en caso de que sus componentes no estén relacionados entre sí (no Padre – Hijo). Cada escenario se explica con un ejemplo simple y asegúrese de incluir el código que se proporciona al comienzo de esta guía en el archivo 'meta-xml'.