Skip to main content
ƚnase a nosotros en TDX, en San Francisco, o en Salesforce+ los dƭas 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

ComunicaciĆ³n entre elemento principal y secundario

Nota

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.

Diagrama de la comunicaciĆ³n de componente principal a secundario donde se ve el envĆ­o desde el aumentador hasta el numerador.

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.
  1. 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.
  1. 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.
  1. 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.

El componente principal (augmentor) envĆ­a informaciĆ³n (startCounter) a la propiedad "counter" del componente secundario (numerator).

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.
  1. 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.
  1. 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.

Diagrama que se corresponde con la descripciĆ³n anterior.

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.
  1. 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.

Diagrama que se corresponde con la descripciĆ³n anterior.

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

Verificar paso

+100 puntos

CompletarĆ” esta/este proyecto en su propia organizaciĆ³n de prĆ”cticas. Haga clic en Iniciar para empezar a trabajar o haga clic en el nombre de su organizaciĆ³n para seleccionar otro diferente.

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantarĆ­a conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

MĆ”s informaciĆ³n Continuar para compartir comentarios