ComunicaciĆ³n entre elemento principal y secundario
Para permitir la comunicaciĆ³n desde un componente principal hasta uno secundario, el secundario debe exponer una propiedad o funciĆ³n para que sea pĆŗblica. De esta manera, el principal podrĆ” actualizar la propiedad pĆŗblica del secundario o llamar a la funciĆ³n pĆŗblica del secundario.
AdemĆ”s, si quiere agregar algo funcionalidad, puede actualizar la propiedad pĆŗblica a un "getter" o un "setter" en el componente secundario.
Empecemos por una actualizaciĆ³n sencilla de la propiedad pĆŗblica. Otra unidad de negocio ha encontrado el numerador que usted creĆ³. Quieren usarlo y agregar datos. Su primera peticiĆ³n es poder definir el nĆŗmero inicial del contador. No queremos realizar cambios que afecten al caso de uso empresarial original, asĆ que vamos a acoplar el componente de numerador a otro componente para que este asuma la nueva funcionalidad.
Actualizar una propiedad pĆŗblica
El decorador @api
del componente secundario permite exponer una propiedad, es decir, hacer que sea pĆŗblica, para que el componente principal pueda actualizarla.
- Exponga una propiedad pĆŗblica en el componente secundario (numerador):
- En Visual Studio Code, abra numerator.js y aplique el decorador
@api
a la propiedadcounter
: - Importe el decorador
api
desde el mĆ³dulolwc
.
- Guarde el archivo.
- Cree y codifique un nuevo componente principal con el nombre
augmentor
:
- Cree un componente web Lightning con el nombre
augmentor
.
- En augmentor.js, pegue este cĆ³digo dentro de la clase
Augmentor
(Aumentador): - Guarde el archivo.
- Abra augmentor.html y agregue este cĆ³digo entre las etiquetas
template
: - Guarde el archivo.
- Actualice el archivo augmentor.js-meta.xml para que el componente "augmentor" estĆ© disponible en las pĆ”ginas de la aplicaciĆ³n Lightning:
- Guarde el archivo.
- Agregue el nuevo componente (augmentor) a la pĆ”gina de la aplicaciĆ³n Event Comms:
- Implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Abra la pĆ”gina de la aplicaciĆ³n Event Comms para editarla.
- Arrastre el componente augmentor a la parte central de la pƔgina.
- Haga clic en Save (Guardar) y salga de Lightning App Builder.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Introduzca un nĆŗmero en el campo Set Starting Counter (Definir contador de inicio).
El recuento se actualiza a la cifra que haya introducido.
- Haga clic en uno de los botones de multiplicar.
Observe que el contador se actualiza, pero el valor de Set Starting Counter (Definir contador de inicio) se queda igual.
- Cambie los valores en el componente numerador original.
Sigue funcionando segĆŗn lo previsto.
Como hemos colocado Set Starting Counter (Definir contador de inicio) en su propio componente (augmentor) en lugar de agregarlo al componente "numerator", este Ćŗltimo sigue cumpliendo su funciĆ³n para el caso empresarial original. Ahora, el numerador recibe datos tanto del componente secundario (controls) como del principal (augmentor).
Llamar a una funciĆ³n pĆŗblica
La segunda peticiĆ³n de la empresa es aumentar el recuento en un millĆ³n. Pero no quieren que se cambie el valor de Set Starting Count (Definir recuento de inicio). Esto significa que no podemos actualizar sin mĆ”s la propiedad startCounter. AdemĆ”s, no tenemos el recuento actual en el componente "augmentor" para sumar datos ahĆ. Vamos a llamar a una funciĆ³n pĆŗblica en el elemento secundario para que haga los cambios por nosotros.
El decorador @api
del componente secundario permite exponer una funciĆ³n, es decir, hacer que sea pĆŗblica, para que el componente principal pueda llamar.
- Cree una funciĆ³n pĆŗblica en el componente secundario (numerator):
- Abra numerator.js y agregue esta funciĆ³n
maximizeCounter
despuĆ©s de la funciĆ³nhandleMultiply
: - Guarde el archivo.
- En el componente principal (augmentor), agregue un botĆ³n y su controlador:
- Abra augmentor.js y agregue esta funciĆ³n
handleMaximizeCounter
despuĆ©s de la funciĆ³nhandleStartChange
:Esta funciĆ³n busca la etiquetac-numerator
en el archivo augmentor.html y llama a la funciĆ³n pĆŗblicamaximizeCounter
.
- Guarde el archivo.
- Abra augmentor.html y agregue
lightning-button
despuƩs delightning-input
en Set Starting Counter (Definir contador de inicio): - Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Haga clic en Add 1m To Counter (Agregar un millĆ³n al contador).
El recuento aumenta en un millĆ³n.
En el componente principal (augmentor), con el nuevo botĆ³n se activa el controlador handleMaximizeCounter
, que permite llamar al componente secundario (numerator) y activar la funciĆ³n pĆŗblica maximizeCounter
.
Usar un "getter" y un "setter" pĆŗblicos
Este ejercicio es muy similar al de actualizar una propiedad que hemos completado al principio de este paso. De hecho, no vamos a cambiar nada del componente principal. En el componente secundario, vamos a implementar la propiedad pĆŗblica "counter" con un "getter" y un "setter" pĆŗblicos.
A las dos unidades de negocio que usan Event Comms les encantan los cambios. Ahora, nos piden poder ver el valor anterior del recuento a medida que este cambia. Necesitamos una forma de capturar el recuento actual cada vez que cambiemos la propiedad "counter". Podemos obtener el recuento actual y guardarlo antes de definir el valor nuevo. Vamos a usar una variable privada llamada _currentCount
para que podemos solucionarlo. Para conservar el recuento anterior y poder mostrarlo, vamos a usar una variable llamada priorCount
.
Para conseguir esta funcionalidad nueva, vamos a implementar la propiedad counter
en forma de "getter" y "setter" (get
y set
, tambiƩn conocidos como propiedad "accessor"). Cada vez que se define el contador, almacenaremos el valor actual (_currentCount
) en la variable priorCount
antes de definir el nuevo valor del contador.
- Agregue un recuento anterior al componente secundario (numerator):
- Abra el archivo numerator.html y agregue este pƔrrafo justo antes del pƔrrafo con el recuento:
- Guarde el archivo.
- Abra numerator.js y convierta
@api counter = 0;
en un comentario (agregue//
al principio de la lĆnea).
- DespuĆ©s del comentario, agregue el siguiente cĆ³digo:El cĆ³digo cambia el valor de
counter
a una propiedad con funciones "getter" (get
) y "setter" (set
). TambiƩn agrega las propiedadespriorCount
y_currentCount
.
- Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Haga clic en Add (Agregar), X2 y Add 1m To Counter (Agregar un millĆ³n al contador) para cambiar el valor de "counter".
El contador anterior se mantiene sincronizado a medida que actualiza el contador.
- Haga clic en los botones de los componentes Numerator (Numerador) y Augmentor (Aumentador) para comprobar que la funcionalidad original no se vea afectada.
Hemos actualizado el componente "numerator" para utilizar un "getter" y un "setter", y actualizar la nueva propiedad priorCount
. El componente principal (augmentor) sigue enviando informaciĆ³n (startCounter
) al componente secundario (numerator). Pero ahora, "numerator" utiliza un "getter" y un "setter" para obtener (get
) la propiedad _currentCount
y definir (set
) las propiedades _currentCount
y priorCount
.
PĆ³ngase a prueba (es opcional, no vamos a revisar el cĆ³digo)
Actualice handleMaximizeCounter
y maximizeCounter
para aceptar un argumento que especifique el nĆŗmero que se va a sumar al recuento. Sugerencia: Revise lo que ha hecho en el primer paso para enviar un data-factor
con el evento personalizado multiply
.
Resumen
Ha aprendido a gestionar la comunicaciĆ³n de componente secundario a principal y de principal a secundario entre componentes web Lightning. En el siguiente paso, utilizarĆ” Lightning Message Service para la comunicaciĆ³n entre componentes que no tienen una relaciĆ³n de principal-secundario.
Recursos
- YouTube: Lightning Web Components: Parent-Child Components (Componentes principales-secundarios)
- GuĆa del desarrollador de componentes web Lightning: Create and Dispatch Events (Crear y enviar eventos)
- GitHub: LWC Recipes: apiProperty (Recetas de LWC: apiProperty)
- GitHub: LWC Recipes: apiSetterGetter (Recetas de LWC: apiSetterGetter)
- Blog de Salesforce Developers: Inter-Component Communication Patterns for Lightning Web Components (ComunicaciĆ³n entre componentes web Lightning)