Comunicarse del elemento secundario al principal
Objetivos de aprendizaje
En este proyecto:
- Creará componentes web Lightning que se comuniquen entre sí.
- Se comunicará desde un componente secundario con su componente principal.
- Se comunicará desde un componente principal con un componente secundario.
- Se comunicará desde un componente con otro no relacionado.
Este proyecto está diseñado para desarrolladores de Salesforce que cuentan con cierta experiencia en la creación de componentes web Lightning. Si aún no se familiarizó con los componentes web Lightning, le recomendamos completar algunas de las insignias de la ruta Crear componentes web Lightning antes de continuar con este proyecto.
Cómo se comunican los componentes
Cuando varios componentes web Lightning integran una aplicación, solemos desear que dichos componentes compartan información. La forma en que nos comunicamos de un componente a otro depende de si estos están relacionados y de qué manera. Un componente dentro de otro crea una relación principal-secundario. La forma en que un elemento principal se comunica con uno secundario es distinta de cómo un elemento secundario se comunica con su principal. Además, estas dos comunicaciones son diferentes de cómo se comunican entre sí los componentes no relacionados (componentes en distintos subárboles del DOM).
En este proyecto, debe establecer comunicaciones entre componentes de cada una de estas relaciones.
Antes de comenzar
Suponemos que su entorno de desarrollo de Salesforce DX está configurado, y no tiene problemas en utilizarlo para crear componentes web Lightning e implementarlos en una organización. Si todavía no está familiarizado con este proceso, complete el proyecto Inicio rápido: Componentes web Lightning antes de continuar con este proyecto.
Crear un nuevo Trailhead Playground
Para este proyecto, deberá crear un nuevo Trailhead Playground. Desplácese a la parte inferior de esta página, haga clic en el nombre de la zona de pruebas y, luego, en Create a Trailhead Playground (Crear un Trailhead Playground). Normalmente lleva de 3 a 4 minutos crear un nuevo Trailhead Playground.
Obtener su nombre de usuario y contraseña de Trailhead Playground
Vamos a empezar. Vaya a su Trailhead Playground. Si aún no está abierto, desplácese a la parte inferior de esta página y haga clic en Launch (Iniciar). Si ve una ficha en su organización etiquetada como Get Your Login Credentials (Obtener sus credenciales de inicio de sesión), ¡excelente! Salte el paso 1. De lo contrario, desde el Iniciador de aplicación (), busque y abra Playground Starter y siga los pasos.
- Haga clic en la ficha Get Your Login Credentials (Obtener sus credenciales de inicio de sesión) y anote su nombre de usuario.
- Haga clic en Reset My Password (Restablecer mi contraseña). Esta acción envía un email a la dirección asociada con su nombre de usuario.
- Haga clic en el vínculo en el email.
- Ingrese una nueva contraseña, confírmela y haga clic en Change Password (Cambiar contraseña).
Configurar su proyecto
- En Visual Studio Code, cree un proyecto de Salesforce DX llamado
Event Comms
(Comunicaciones de eventos).
- Autorice su Trailhead Playground.
Comunicarse con un evento personalizado
Comencemos con un escenario simple. Un componente secundario envía un evento personalizado que desencadena una actualización en el componente principal.
Cuando envía un evento, puede elegir enviar algunos datos y permitir que el evento se propague a través del DOM. Comencemos con un escenario simple. Un componente secundario envía un evento personalizado que desencadena una actualización en el componente principal.
Comunicarse desde el componente controls con el componente numerator
- Cree una página de la aplicación Lightning de tres regiones llamada
Event Comms
(Comunicaciones de eventos):
- En su organización (su Trailhead Playground), abra Setup (Configuración).
- En el cuadro Quick Find (Búsqueda rápida), ingrese
Lightning App Builder
(Generador de aplicaciones Lightning) y, luego, seleccione Lightning App Builder (Generador de aplicaciones Lightning).
- Haga clic en New (Nuevo).
- Con la opción App Page (Página de aplicación) seleccionada, haga clic en Next (Siguiente).
- En Label (Etiqueta), ingrese
Event Comms
(Comunicaciones de eventos) y, luego, haga clic en Next (Siguiente).
- Seleccione Three Regions (Tres regiones) y, a continuación, haga clic en Done (Listo).
- Haga clic en Save (Guardar), Activate (Activar), Save (Guardar) y Skip and Save (Omitir y guardar).
- Haga clic en
para salir del Generador de aplicaciones Lightning.
- Cree el componente web Lightning principal denominado
numerator
:
- En Visual Studio Code, en el directorio force-app/main/default, haga clic derecho en la carpeta lwc y seleccione SFDX: Create Lightning Web Component (Crear componente web Lightning).
- Ingrese
numerator
como nombre para el nuevo componente.
- Presione Intro y, luego, Intro de nuevo para aceptar la ubicación predeterminada
force-app/main/default/lwc
.
- Codifique los archivos del componente numerator:
- En numerator.js, pegue el siguiente código en la clase
Numerator
: - Guarde el archivo.
- Abra numerator.html y agregue este código entre las etiquetas
template
: - Guarde el archivo.
- Para que el componente numerator esté disponible en las páginas de la aplicación Lightning, abra numerator.js-meta.xml y sustituya la etiqueta
isExposed
por las siguientes líneas: - Guarde el archivo.
- Agregue el componente numerator a la aplicación Event Comms (Comunicaciones de eventos):
- Haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Deploy This Source to Org (Implementar esta fuente en la organización) para implementar la carpeta lwc en su organización.
- Desde el Iniciador de aplicación (
) en su zona de pruebas, busque y abra Event Comms (Comunicaciones de eventos).
- Haga clic en
y seleccione Edit Page (Modificar página) para abrir la página de la aplicación Event Comms (Comunicaciones de eventos) con el fin de realizar modificaciones.
- Arrastre el componente numerator, en Custom (Personalizar) en la lista Components (Componentes), hasta la región izquierda de la página.
- Haga clic en Save (Guardar).
- Haga clic en
para salir del Generador de aplicaciones Lightning.
- Cree y codifique el componente secundario llamado
controls
:
- Regrese a Visual Studio Code y cree un componente web Lightning llamado
controls
.
- En controls.js, pegue el siguiente código en la clase
Controls
: - Guarde el archivo.
- Abra controls.html y agregue este código entre las etiquetas
template
: - Guarde el archivo.
- Agregue el componente secundario (controls) en el componente principal (numerator):
- Abra numerator.html y sustituya el comentario
controls go here
(los controles van aquí) por el siguiente código: - Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos) en la organización de su Trailhead Playground.
- Haga clic en Add (Sumar) para que el recuento aumente.
- Haga clic en Subtract (Restar) para que el recuento disminuya.
Ahora, contamos con un componente secundario (controls) que envía un evento add
(sumar) al componente principal (numerator), que desencadena la función handleIncrement
en el componente principal (numerator).
Enviar datos con el evento personalizado
Ahora, hagamos que el componente secundario envíe algunos datos con el evento al elemento principal. El negocio desea multiplicar el recuento. Le ofreceremos más de una opción. Utilizamos un evento personalizado para pasar datos del elemento secundario al principal.
- Agregue botones y una función de multiplicación al componente secundario (controls):
- Abra controls.html y sustituya el comentario
buttons go here
(los botones van aquí) dentro de la segunda etiquetalightning-layout-item
por el siguiente código: - Guarde el archivo.
- Abra controls.js y agregue esta función
handleMultiply
luego de la funciónhandleSubtract
:Tenga en cuenta que pasamos el eventoonclick
a la funciónhandleMultiply
, que obtiene el botóndata-factor
medianteevent.target.dataset.factor
. Luego, pasamosfactor
junto con el nuevo evento personalizado (multiply
) al componente principal (numerator).
- Guarde el archivo.
- Actualice el componente principal (numerator):
- Abra numerator.html y agregue este atributo a la etiqueta
c-controls
: - Guarde el archivo.
- Abra numerator.js y agregue esta función
handleMultiply
luego de la funciónhandleDecrement
:Aquí, se le pasa el eventoonmultiply
a la funciónhandleMultiply
, y esta utiliza sus datos (event.detail
) para actualizar el recuento (counter).
- Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y, luego, actualice la aplicación Event Comms (Comunicaciones de eventos).
- Haga clic en Add (Sumar) para que el recuento aumente.
- Haga clic en X 2 para que el recuento se multiplique por 2.
- Haga clic en X 3 para que el recuento se multiplique por 3.
El componente controls pasa datos (data-factor
) a su elemento principal (numerator) junto con el evento personalizado multiply
.
Permitir que los eventos personalizados se propaguen
Los dos botones de multiplicación fueron exitosos. Ahora, el negocio desea más opciones de multiplicación. Facilitemos que se puedan agregar tantos botones como sea necesario. Agregaremos otro componente web Lightning para los botones. Para permitir que las comunicaciones se lleven a cabo, utilizará la propagación de eventos, que permite que el evento personalizado del componente de botón se propague en el árbol del DOM.
- Cree un componente llamado
button
:
- Cree un componente web Lightning denominado
button
.
- En button.js, pegue el siguiente código en la clase
Button
: - Importe el decorador
api
del módulolwc
. - Guarde el archivo.
- Abra button.html y agregue este código entre las etiquetas
template
: - Guarde el archivo.
- Haga que el componente button sea el elemento secundario del componente controls:
- Abra controls.html y elimine
lightning-layout-item
que contiene dos etiquetaslightning-button
.
- En su lugar, pegue el siguiente código:Observe que movimos la llamada de función
handleMultiply
al controladoronbuttonclick
enlightning-layout-item
. Esto nos evita tener que agregar un controlador en cada botón, lo que genera un código más nítido y rápido.
- Guarde el archivo.
- Abra controls.js y agregue esta propiedad
factors
en la claseControls
: - Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
- Haga clic en Add (Sumar) para que el recuento aumente.
- Haga clic en X 2 y observe que no sucede nada. ¿Por qué? De forma predeterminada, un evento personalizado no se propaga por fuera del host.
[Texto alternativo: el evento personalizado no va más allá de su contenedor].
Para permitir que el evento (buttonclick
) se propague alightning-layout-item
, agregamosbubbles:true
enCustomEvent
.
- Abra button.js y quite la marca de comentario (primero elimine
//
)bubbles:true
.
[Texto alternativo: el evento personalizado ahora se propaga por fuera de su contenedor].
- Guarde el archivo y vuelva a implementarlo.
- Actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
- Ahora, haga clic en Add (Sumar) para establecer el recuento como 1.
- Haga clic en X 2 para que el recuento se multiplique por 2.
- Haga clic en X 6 para que el recuento se multiplique por 6.
- Haga clic en X 0 para restablecer el recuento desde cero.
- Intente hacer clic de la siguiente manera: Add (Sumar), X 2, X 5, X 2, Add (Sumar) y X 2. O bien: Add (Sumar), X 3, X 2, X 2, Subtract (Restar), X 2, Subtract (Restar) y X 2. O bien, pruebe su propia combinación.
Desafíese (opcional, no comprobaremos este código).
Agregue una segunda instancia del componente de botón button en el componente de controles para crear botones de división que se muestren en el componente de numerador.
Resumen
En este paso, estableció la comunicación de un componente secundario con su elemento principal mediante un evento personalizado. Pasó el evento con y sin datos, y observó cómo la propagación afecta las comunicaciones del elemento secundario al principal. En el próximo paso, facilitará las comunicaciones del elemento principal al secundario.
Recursos
- Trailhead: Inicio rápido: Explorar la aplicación de muestra de recetas de LWC
- Guía para desarrolladores de componentes web Lightning: Crear y despachar eventos
- GitHub: Recetas de LWC: eventSimple
- GitHub: Recetas de LWC: eventWithData
- GitHub: Recetas de LWC: eventBubbling
- Documentos web MDN: Crear y desencadenar eventos
- Blog para desarrolladores de Salesforce: Patrones de comunicación entre componentes para componentes web Lightning
- Blog para desarrolladores de Salesforce: Cómo se propagan los eventos en los componentes web Lightning