Skip to main content
Únase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regístrese ahora.

Comunicarse del elemento principal al secundario

Nota

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

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 habilitar la comunicación de un componente principal con un componente secundario, el secundario expone la propiedad o la función para hacerla pública. Luego, el principal puede actualizar la propiedad pública o realizar una llamada a la función pública del secundario.

Diagrama de comunicación del elemento principal al secundario en el que se muestra la comunicación de augmentor a numerator.

Además, si desea agregar alguna funcionalidad, actualice la propiedad pública a un captador y establecedor en el componente secundario.

Comencemos con una actualización de propiedad pública simple. Otra unidad de negocio encontró el numerador que usted creó. Desea utilizarlo y agregarle elementos. Su primera solicitud es poder establecer el número de inicio del recuento. No deseamos realizar cambios que afecten el caso de uso de negocio original, por lo que incluiremos el componente numerator (numerador) en otro componente, que alojará la nueva funcionalidad. 

Actualizar una propiedad pública

El decorador @api en el componente secundario expone una propiedad, lo que la vuelve pública, de forma que el componente principal pueda actualizarla.

  1. Exponga una propiedad pública en el componente secundario (numerator):
    1. En Visual Studio Code, abra numerator.js y aplique el decorador @api en la propiedad counter:
        @api counter = 0;
    2. Importe el decorador api del módulo lwc.
    3. Guarde el archivo.
  1. Cree y codifique un nuevo componente principal llamado augmentor:
    1. Cree un componente web Lightning denominado augmentor.
    2. En augmentor.js, pegue el siguiente código en la clase Augmentor:
        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 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 (Comunicaciones de eventos):
    1. Implemente la carpeta lwc y, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
    2. Abra la página de la aplicación Event Comms (Comunicaciones de eventos) para realizar modificaciones.
    3. Arrastre el componente augmentor hasta la región central de la página.
    4. Haga clic en Save (Guardar) y, luego, salga del Generador de aplicaciones Lightning.
  1. Verifique las comunicaciones:
    1. Para ver los cambios en Salesforce, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
    2. Ingrese un número en el campo Set Starting Counter (Establecer contador de inicio).
      El recuento se actualizará al número que ingrese.
    3. Haga clic en uno de los botones de multiplicación.
      Observe que el contador se actualizará, pero el valor de Set Starting Counter (Establecer contador de inicio) permanecerá igual.
    4. Modifique los valores en el componente numerator original.
      Sigue funcionando como se lo esperaba.

El componente principal (augmentor) envía información (startCounter) a la propiedad counter en el componente secundario (numerator).

Como colocamos Set Starting Counter (Establecer contador de inicio) en su propio componente (augmentor), en lugar de agregarlo al componente numerator, este último sigue funcionando como el caso de negocio original. Ahora, numerator recibe entradas de su elemento secundario (controls) y su elemento principal (augmentor).

Llamar a una función pública

La segunda solicitud del negocio es aumentar el recuento en un millón. No desea que se modifique Set Starting Count (Establecer recuento de inicio). Esto significa que no podemos simplemente actualizar la propiedad startCounter. Tampoco conocemos el recuento actual del componente augmentor al cual sumar. Llamaremos a una función pública en el componente secundario para que realice la actualización por nosotros.

El decorador @api en el componente secundario expone una función, lo que la vuelve pública, de forma que el componente principal pueda llamarla.

  1. Cree una función pública en el componente secundario (numerator):
    1. Abra numerator.js y agregue esta función maximizeCounter luego 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 luego de la función handleStartChange:
        handleMaximizeCounter() {
    this.template.querySelector('c-numerator').maximizeCounter();
  }
      Esta función busca la etiqueta c-numerator en augmentor.html y llama a la función pública maximizeCounter.
    2. Guarde el archivo.
    3. Abra augmentor.html y agregue lightning-button luego de Set Starting Counter (Establecer contador de inicio) lightning-input:
              <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, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
    2. Haga clic en Add 1m To Counter (Agregar 1m al contador).
      El recuento aumentará en un millón.

En el elemento principal (augmentor), el nuevo botón desencadena el controlador handleMaximizeCounter, que llama al componente secundario (numerator) y desencadena su función pública maximizeCounter.

Diagrama correspondiente a la descripción anterior.

Utilizar un captador y establecedor públicos

Este ejercicio es muy similar a cómo actualizó una propiedad al principio de este paso. De hecho, no realizaremos ningún cambio en el componente principal. En el componente secundario, solo implementamos la propiedad pública counter con un captador y establecedor públicos.

A ambas unidades de negocio que utilizan Event Comms (Comunicaciones de eventos) les encantan las actualizaciones. Ahora, les gustaría ver el valor anterior del recuento a medida que este se modifique. Necesitamos una forma de capturar el recuento actual cada vez que modificamos la propiedad counter. Podemos obtener el recuento actual y guardarlo antes de establecer el nuevo valor. Utilicemos una nueva variable privada llamada _currentCount, de forma que podamos trabajar con ella. Para mantener el recuento anterior de forma que podamos mostrarlo, utilizaremos una variable llamada priorCount.

Para la funcionalidad adicional, implementamos la propiedad counter como un captador y establecedor (get y set, también conocida como una propiedad de descriptor de acceso). Luego, cada vez que se establezca el contador, almacenaremos el valor actual del contador (_currentCount) en la variable priorCount antes de establecer el valor nuevo.

  1. Agregue un recuento anterior al componente secundario (numerator):
    1. Abra numerator.html y agregue el siguiente párrafo justo antes del párrafo que contiene Count (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 e ingrese @api counter = 0; como un comentario (agregue // al principio de la línea).
    4. Luego 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 modifica counter a una propiedad con las funciones de captador (get) y establecedor (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, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
    2. Haga clic en Add (Sumar), X2 y Add 1m To Counter (Agregar 1m al contador) para modificar el valor del contador.
      El valor Prior Counter (Contador anterior) permanecerá sincronizado a medida que actualice el contador.
    3. Haga clic en los botones de los componentes Numerator y Augmentor para comprobar que la funcionalidad original no se vea afectada.

Actualizamos el componente numerator para que utilice un captador y establecedor con el fin de actualizar la nueva propiedad priorCount. El componente principal (augmentor) aún envía información (startCounter) al componente secundario (numerator). Sin embargo, ahora numerator utiliza un captador y establecedor para get (obtener) la propiedad _currentCount y set (establecer) las propiedades _currentCount y priorCount.

Diagrama correspondiente a la descripción anterior.

Desafíese (opcional, no comprobaremos este código).

Actualice handleMaximizeCounter y maximizeCounter para aceptar un argumento que especifique el número que se debe agregar al recuento. Sugerencia: Revise lo que hizo en el paso 1 para enviar data-factor (factor de datos) con el evento personalizado multiply (multiplicar).

Resumen

Abordó las comunicaciones del elemento secundario al principal y del principal al secundario entre componentes web Lightning. En el próximo paso, utilizará el Servicio de mensajería Lightning para comunicarse entre componentes que no tienen una relación principal-secundario.

Recursos

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios