Comunicación entre elemento principal y secundario

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

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.

1. Exponga una propiedad pública en el componente secundario (numerador):
   

1. En Visual Studio Code, abra numerator.js y aplique el decorador @api a la propiedad counter:
   

     @api counter = 0;

2. Importe el decorador api desde el módulo lwc.
   
3. Guarde el archivo.
   

2. Cree y codifique un nuevo componente principal con el nombre augmentor:
   

1. Cree un componente web Lightning con el nombre augmentor.
   
2. En augmentor.js, pegue este código dentro de la clase Augmentor (Aumentador):
   

     startCounter = 0;
     handleStartChange(event) {
       this.startCounter = parseInt(event.target.value);
     }

3. Guarde el archivo.
   
4. Abra augmentor.html y agregue este código entre las etiquetas template:
   

     <lightning-card title="Augmentor" icon-name="action:download">
       <lightning-layout>
         <lightning-layout-item flexibility="auto" padding="around-small">
           <lightning-input
             label="Set Starting Counter"
             type="number"
             min="0"
             max="1000000"
             value={startCounter}
             onchange={handleStartChange}>
           </lightning-input>
         </lightning-layout-item>
       </lightning-layout>
       <c-numerator
         class="slds-show slds-is-relative"
         counter={startCounter}>
       </c-numerator>
     </lightning-card>

5. Guarde el archivo.
   
6. Actualice el archivo augmentor.js-meta.xml para que el componente "augmentor" esté disponible en las páginas de la aplicación Lightning:
   

       <isExposed>true</isExposed>
       <targets>
         <target>lightning__AppPage</target>
       </targets>

7. Guarde el archivo.
   

3. Agregue el nuevo componente (augmentor) a la página de la aplicación Event Comms:
   

1. Implemente la carpeta lwc y actualice la página de la aplicación Event Comms.
   
2. Abra la página de la aplicación Event Comms para editarla.
   
3. Arrastre el componente augmentor a la parte central de la página.
   
4. Haga clic en Save (Guardar) y salga de Lightning App Builder.
   

4. Verifique las comunicaciones:
   

1. Para ver los cambios en Salesforce, actualice la página de la aplicación Event Comms.
   
2. Introduzca un número en el campo Set Starting Counter (Definir contador de inicio).
   El recuento se actualiza a la cifra que haya introducido.
   
3. 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.
   
4. 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.

1. Cree una función pública en el componente secundario (numerator):
   

1. Abra numerator.js y agregue esta función maximizeCounter después de la función handleMultiply:
   

     @api
     maximizeCounter() {
       this.counter += 1000000;
     }

2. Guarde el archivo.
   

2. En el componente principal (augmentor), agregue un botón y su controlador:
   

1. Abra augmentor.js y agregue esta función handleMaximizeCounter después de la función handleStartChange:
   

     handleMaximizeCounter() {
       this.template.querySelector('c-numerator').maximizeCounter();
     }

   Esta función busca la etiqueta c-numerator en el archivo augmentor.html y llama a la función pública maximizeCounter.
   
2. Guarde el archivo.
   
3. Abra augmentor.html y agregue lightning-button después de lightning-input en Set Starting Counter (Definir contador de inicio):
   

           <lightning-button
             class="slds-var-p-vertical_xx-small"
             label="Add 1m To Counter"
             onclick={handleMaximizeCounter}>
           </lightning-button>

4. Guarde el archivo.
   

3. Verifique las comunicaciones:
   

1. Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la página de la aplicación Event Comms.
   
2. 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.

1. Agregue un recuento anterior al componente secundario (numerator):
   

1. Abra el archivo numerator.html y agregue este párrafo justo antes del párrafo con el recuento:
   

         <p class="slds-text-align_center slds-var-m-vertical_medium">
           Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
         </p>

2. Guarde el archivo.
   
3. Abra numerator.js y convierta @api counter = 0; en un comentario (agregue // al principio de la línea).
   
4. Después del comentario, agregue el siguiente código:
   

     _currentCount = 0;
     priorCount = 0;
     @api
     get counter() {
       return this._currentCount;
     }
     set counter(value) {
       this.priorCount = this._currentCount;
       this._currentCount = value;
     }

   El código cambia el valor de counter a una propiedad con funciones "getter" (get) y "setter" (set). También agrega las propiedades priorCount y _currentCount.
   
5. Guarde el archivo.
   

2. Verifique las comunicaciones:
   

1. Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la página de la aplicación Event Comms.
   
2. 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.
   
3. 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)