ComunicaciĆ³n entre componentes no relacionados
Para la comunicaciĆ³n entre los Ć”rboles secundarios del DOM (y en algunos casos entre distintas ventanas de un navegador donde se ha iniciado sesiĆ³n en la misma organizaciĆ³n), puede usar Lightning Message Service (LMS). LSM es un servicio de publicaciĆ³n y suscripciĆ³n que facilita la comunicaciĆ³n entre componentes web Lightning, componentes de Aura y pĆ”ginas de Visualforce.
Puede usar LMS para la comunicaciĆ³n entre componentes no relacionados a menos que controle tanto los componentes como el componente principal comĆŗn. LMS es una herramienta potente, eficaz y fĆ”cil de usar, pero no deje que eso le ciegue para usarla cuando no es realmente necesaria. Es mucho mĆ”s eficiente activar eventos DOM. Si necesita comunicarse entre componentes con un elemento principal que no estĆ” bajo su control, como ranuras de App Builder, Lightning Message Service es la opciĆ³n perfecta.
Una tercera unidad de negocio quiere unirse al proyecto de manipulaciĆ³n de cifras. Necesitan reunir Prior Count (Recuento anterior) y Count (Recuento) en su propio componente para mostrar esos datos donde los necesiten. Vamos a empezar por crear el canal de mensajerĆa para que estĆ© listo para los componentes.
Crear un canal de mensajerĆa de Lightning
- En Visual Studio Code, en la carpeta default, cree una carpeta con el nombre
messageChannels
.
- En la carpeta messageChannels, cree un archivo con el nombre
Count_Updated.messageChannel-meta.xml
.
- En Count_Updated.messageChannel-meta.xml, pegue este cĆ³digo:
- Guarde e implemente el archivo.
Crear el componente de publicaciĆ³n
- Cree un componente web Lightning con el nombre
remoteControl
.
- Sustituya el contenido de remoteControl.js por el siguiente cĆ³digo:Importamos
publish
yMessageContext
desde Lightning Message Service. TambiƩn importamos el canal que acabamos de crear (Count_Updated__c
). La carga Ćŗtil de los datos se envĆa junto con la funciĆ³npublish
.
- Guarde el archivo.
- Abra remoteControl.html y agregue este cĆ³digo entre las etiquetas
template
:Observe que estamos usando componentes de controles.
- Guarde el archivo.
- Actualice el archivo remoteControl.js-meta.xml para que el componente remoteControl estĆ© disponible en las pĆ”ginas de la aplicaciĆ³n Lightning:
- Guarde el archivo.
Crear el componente de suscripciĆ³n
- Cree un componente web Lightning con el nombre
counts
.
- Sustituya el contenido de counts.js por el siguiente cĆ³digo:
Con la referencia a @wire(MessageContext)
, nos aseguramos de que se ejecute unsubscribe
durante el ciclo de vida de destrucciĆ³n del componente.
- Guarde el archivo.
- Abra counts.html y agregue este cĆ³digo entre las etiquetas
template
: - Guarde el archivo.
- Actualice el archivo counts.js-meta.xml para que el componente "counts" estĆ© disponible en las pĆ”ginas de la aplicaciĆ³n Lightning:
- Guarde el archivo.
Agregar los nuevos componentes a la aplicaciĆ³n Event Comms
- Implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Abra la pƔgina Event Comms para editarla.
- Arrastre el componente remoteControl a la parte derecha de la pƔgina.
- Arrastre el componente counts a la parte derecha de la pƔgina, junto debajo de remoteControl.
- Haga clic en Save (Guardar) y salga de Lightning App Builder.
Verificar las comunicaciones
- Haga clic en los botones de Remote Control (Control remoto) para cambiar el recuento del componente "counts".
Puede usar Lightning Message Service para comunicarse tambiƩn con componentes de Aura y pƔginas de Visualforce. Es la manera mƔs organizada de sincronizar distintos tipos de componentes.
Ahora tiene bastantes conocimientos sobre cĆ³mo funciona la comunicaciĆ³n entre componentes web Lightning. Ha trabajado con casos de componentes no relacionados, de componente secundario a principal y de componente principal a secundario. No olvide consultar los recursos para obtener mĆ”s informaciĆ³n sobre la comunicaciĆ³n entre componentes web Lightning.
Recursos
- GuĆa del desarrollador de componentes web Lightning: Communicate Across the DOM (ComunicaciĆ³n en el DOM)
- GuĆa del desarrollador de componentes web Lightning: Configure Event Propagation (Configurar la propagaciĆ³n de eventos)
- GuĆa del desarrollador de componentes web Lightning: Events Best Practices (PrĆ”cticas recomendadas de eventos)
- GuĆa del desarrollador de componentes web Lightning: Lightning Message Service
- Referencia sobre componentes web Lightning: Message Service (Servicio de mensajerĆa)
- GitHub: LWC Recipes: lmsPublisherWebComponent (Recetas de LWC: lmsPublisherWebComponent)
- GitHub: LWC Recipes: lmsSubscriberWebComponent (Recetas de LWC: lmsSubscriberWebComponent)
- Blog de Salesforce Developers: Lightning Message Service [Developer Preview] (Vista previa del desarrollador)
- Blog de Salesforce Developers: Step Up Your LWC Skills (Mejorar sus habilidades con LWC)
- Blog de Salesforce Developers: Inter-Component Communication Patterns for Lightning Web Components (ComunicaciĆ³n entre componentes web Lightning)