Skip to main content

Comunicación entre elemento secundario y principal

Objetivos de aprendizaje

En este proyecto, alcanzará los siguientes objetivos:

  • Crear componentes web Lightning que se comuniquen entre ellos.
  • Gestionar la comunicación desde un componente secundario hasta su componente principal.
  • Gestionar la comunicación desde un componente principal hasta un componente secundario.
  • Gestionar la comunicación desde un componente hasta un componente no relacionado.
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.

Este proyecto está pensado para desarrolladores de Salesforce que tengan algo de experiencia con la creación de componentes web Lightning. Si todavía no domina mucho los componentes web Lightning, le recomendamos completar algunas de las insignias de la ruta Crear componentes web Lightning antes de seguir con este proyecto.

Cómo se comunican los componentes

Cuando varios componentes web Lightning conforman una aplicación, lo habitual es querer que compartan información entre ellos. La forma en que se comunican los componentes depende de si se relacionan y cómo lo hacen. Cuando hay un componente dentro de otro, se genera una relación principal-secundario. La comunicación desde un principal a un secundario es distinta de la comunicación desde un secundario a un principal. Y estos tipos de comunicación son distintas a la que se establece entre los componentes no relacionados (componentes en árboles secundarios de DOM diferentes).

Tipos de comunicación: componentes no relacionados, de componente secundario a principal y de componente principal a secundario.

En este proyecto, vamos a establecer comunicaciones entre componentes que tienen cada uno de estos tipos de relación. 

Antes de comenzar

Se presupone que tiene configurado un entorno de desarrollo de Salesforce DX tiene experiencia utilizándolo para desarrollar componentes web Lightning e implementarlos en una organización. Si todavía no está familiarizado con este proceso, complete el proyecto Inicio rápido: Lightning Web Components antes de continuar con el proyecto.

Crear un nuevo Trailhead Playground

En este proyecto, tendrá que crear un nuevo Trailhead Playground. Desplácese hasta el final de la página, haga clic en el nombre del Playground y haga clic en Create a Trailhead Playground (Crear un Trailhead Playground). La creación de un nuevo Trailhead Playground suele tardar entre 3 y 4 minutos. 

Nota

Sí, ¡realmente queremos decir un Trailhead Playground completamente nuevo! Si está utilizando una organización o playground existente, pueden surgir problemas a la hora de completar los retos.

Obtener el nombre de usuario y la contraseña de su Trailhead Playground

Vamos a empezar. Vaya a su Trailhead Playground. Si no está abierto, desplácese hasta la parte inferior de esta página y haga clic en Launch (Iniciar). Si ve una ficha en su organización etiquetada como Obtener sus credenciales de inicio de sesión, ¡excelente! Vaya al primer paso. De lo contrario, en App Launcher (Iniciador de aplicación), busque y abra Playground Starter y siga los pasos.

  1. Haga clic en la ficha Get Your Login Credentials (Obtener sus credenciales de inicio de sesión) y anote su nombre de usuario.
  2. Haga clic en Reset My Password (Restablecer mi contraseña). Con esta acción se envía un correo electrónico a la dirección asociada a su nombre de usuario.
  3. Haga clic en el vínculo en el correo electrónico.
  4. Introduzca una nueva contraseña, confírmela y haga clic en Change Password (Cambiar contraseña).

Configurar el proyecto

  1. En Visual Studio Code, cree un proyecto de Salesforce DX con el nombre Event Comms.
  2. Autorice su Trailhead Playground.

Comunicarse con un evento personalizado

Vamos a empezar con un escenario sencillo. Un componente secundario envía un evento personalizado que desencadena una actualización en el componente principal.

Un componente secundario llamado "controls" está incluido dentro de un componente principal, el componente "numerator", con el que se comunica en sentido ascendente.

Cuando se envía un evento, puede elegir entre enviar datos y permitir que el evento aparezca por el DOM. Vamos a empezar con un escenario sencillo. Un componente secundario envía un evento personalizado que desencadena una actualización en el componente principal.

Comunicación desde el componente "controls" hasta el componente "numerator"

  1. Cree una página de aplicación Lightning de tres regiones con el nombre Event Comms
    1. En su organización (su Trailhead Playground), abra Setup (Configuración).
    2. En el cuadro Quick Find (Búsqueda rápida), escriba Lightning App Builder y, a continuación, seleccione Lightning App Builder.
    3. Haga clic en New (Nuevo).
    4. Con App Page (Página de aplicación) seleccionado, haga clic en Next (Siguiente).
    5. En Label (Etiqueta), escriba Event Comms y haga clic en Next (Siguiente).
    6. Seleccione Three Regions (Tres regiones) y luego haga clic en Done (Listo).
    7. Haga clic en Save (Guardar), Activate (Activar), Save (Guardar) y Skip and Save (Omitir y guardar).
    8. Haga clic en Back (Atrás) para salir de Lightning App Builder.
  1. Cree el componente web Lightning principal con el nombre numerator.
    1. En Visual Studio Code, en force-app/main/default, haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Create Lightning Web Component (Crear un componente web Lightning).
    2. Escriba numerator como nombre del componente nuevo.
    3. Pulse Enter (Intro) y luego vuelva a pulsar Enter (Intro) para aceptar la carpeta predeterminada force-app/main/default/lwc.
  1. Codifique los archivos del componente "numerator":
    1. En numerator.js, pegue este código dentro de la clase Numerador (Numerador):
        counter = 0;
  handleIncrement() {
    this.counter++;
  }
  handleDecrement() {
    this.counter--;
  }
    2. Guarde el archivo.
    3. Abra numerator.html y agregue este código entre las etiquetas template:
        <lightning-card title="Numerator" icon-name="action:manage_perm_sets">   
    <p class="slds-text-align_center slds-var-m-vertical_medium">
      Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
    </p>
    <!-- controls go here -->
  </lightning-card>
    4. Guarde el archivo.
    5. Para que el componente "numerator" esté disponible en páginas de aplicación Lightning, abra numerator.js-meta.xml y sustituya la etiqueta isExposed por estas líneas:
          <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
    </targets>
    6. Guarde el archivo.
  1. Agregue el componente "numerator" a la aplicación Event Comms:
    1. Haga clic con el botón derecho en la carpeta lwc y seleccione SFDX: Deploy This Source to Org (SFDX: Implementar este código fuente en la organización) para implementar la carpeta lwc en la organización.
    2. Desde App Launcher (Iniciador de aplicación, Iniciador de aplicación) en su Playground, busque y abra Event Comms.
    3. Haga clic en Setup (Configuración) y seleccione Edit Page (Modificar página) para abrir la página de la aplicación Event Comms para editarla.
    4. Arrastre el componente numerator (en Custom [Personalizados] en la lista de componentes) a la región izquierda de la página.
    5. Haga clic en Save (Guardar).
    6. Haga clic en Back (Atrás) para salir de Lightning App Builder.
  1. Cree y codifique el componente secundario con el nombre controls:
    1. Vuelva a Visual Studio Code y cree un componente web Lightning con el nombre controls.
    2. En controls.js, pegue este código dentro de la clase Controls (Controles):
        handleAdd() {
    this.dispatchEvent(new CustomEvent('add'));
  }
  handleSubtract() {
    this.dispatchEvent(new CustomEvent('subtract'));
  }
    3. Guarde el archivo.
    4. Abra controls.html y agregue este código entre las etiquetas template:
        <lightning-card title="Controls" icon-name="action:upload">
    <lightning-layout>
      <lightning-layout-item flexibility="auto" padding="around-small">
        <lightning-button
          label="Subtract"
          icon-name="utility:dash"
          onclick={handleSubtract}>
        </lightning-button>
      </lightning-layout-item>
      <lightning-layout-item flexibility="auto" padding="around-small">
        <!-- buttons go here -->
      </lightning-layout-item>
      <lightning-layout-item flexibility="auto" padding="around-small">
        <lightning-button
          label="Add"
          icon-name="utility:add"
          onclick={handleAdd}
          icon-position="right">
        </lightning-button>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
    5. Guarde el archivo.
  1. Agregue el componente secundario (controls) al componente principal (numerator):
    1. Abra numerator.html y sustituya el comentario controls go here (aquí van los controles) por el siguiente código:
          <c-controls
      class="slds-show slds-is-relative"
      onadd={handleIncrement}
      onsubtract={handleDecrement}>
    </c-controls>
    2. 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 en su organización de Trailhead Playground.
    2. Haga clic en Add (Sumar) y observe cómo aumenta el recuento.
    3. Haga clic en Substract (Restar) y observe cómo disminuye el recuento.

Ahora tenemos un componente secundario (controls) que enviar un evento add (sumar) al componente principal (numerator), desencadenando así la función handleIncrement en el componente principal (numerator).

Diagrama que se corresponde con la descripción anterior.

Enviar datos con el evento personalizado

Ahora vamos a hacer que el componente secundario envíe datos con el evento al componente principal. La empresa quiere multiplicar el recuento. Vamos a ofrecerle más de una opción. Una opción es usar un evento personalizado para enviar datos del secundario al principal.

  1. Agregue botones de multiplicación y una función de multiplicación al componente secundario (controls):
    1. Abra controls.html y sustituya el comentario buttons go here (aquí van los botones) dentro de la segunda etiqueta lightning-layout-item por el siguiente código:
            <lightning-button
        label="2"
        data-factor="2"
        icon-name="utility:close"
        onclick={handleMultiply}>
      </lightning-button>
      <lightning-button
        label="3"
        data-factor="3"
        icon-name="utility:close"
        onclick={handleMultiply}>
      </lightning-button>
    2. Guarde el archivo.
    3. Abra controls.js y agregue esta función handleMultiply después de la función handleSubstract:
        handleMultiply(event) {
    const factor = event.target.dataset.factor;
    this.dispatchEvent(new CustomEvent('multiply', {
      detail: factor
    }));
  }
      Fíjese en que enviamos el evento onclick a la función handleMultiply y esta envía el valor de data-factor del botón a event.target.dataset.factor. Después enviamos el valor de factor junto con el nuevo evento personalizado (multiply) al componente principal (numerator).
    4. Guarde el archivo.
  1. Actualice el componente principal (numerator):
    1. Abra numerator.html y agregue este atributo a la etiqueta c-controls:
      onmultiply={handleMultiply}
    2. Guarde el archivo.
    3. Abra numerator.js y agregue esta función handleMultiply después de la función handleDecrement:
        handleMultiply(event) {
    const factor = event.detail;
    this.counter *= factor;
  }
      Aquí, la función handleMultiply obtiene el evento onmultiply enviado y utiliza sus datos (event.detail) para actualizar el recuento (counter).
    4. Guarde el archivo.
  1. Verifique las comunicaciones:
    1. Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la aplicación Event Comms.
    2. Haga clic en Add (Sumar) y observe cómo aumenta el recuento.
    3. Haga clic en X 2 y observe cómo se multiplica el recuento por dos.
    4. Haga clic en X 3 y observe cómo se multiplica el recuento por tres.

El componente "controls" envía datos (data-factor) a su componente principal (numerator) junto el evento personalizado multiply.

Diagrama que se corresponde con la descripción anterior.

Permitir que aparezcan eventos personalizados

Los dos botones de multiplicación han sido todo un éxito. Ahora la empresa quiere más opciones para multiplicar. Vamos a hacer que sea fácil agregar todos los botones que quieran. Vamos a agregar otro componente web Lightning para los botones. Para permitir las comunicaciones, vamos a usar la opción de propagación de eventos. La propagación permite que el evento personalizado del componente de botón se propague al árbol de DOM.

  1. Cree un componente con el nombre button (botón):
    1. Cree un componente web Lightning con el nombre button (botón).
    2. En button.js, pegue este código dentro de la clase Button (Botón):
        @api label;
  @api icon;
  handleButton(event) {
    this.dispatchEvent(new CustomEvent('buttonclick',{
      // bubbles: true
    }));
  }
    3. Importe el decorador api desde el módulo lwc.
      import { LightningElement, api } from 'lwc';
    4. Guarde el archivo.
    5. Abra button.html y agregue este código entre las etiquetas template:
        <lightning-button
    label={label}
    data-factor={label}
    icon-name={icon}
    onclick={handleButton}>
  </lightning-button>
    6. Guarde el archivo.
  1. Convierta el componente "button" en un componente secundario del componente "controls":
    1. Abra controls.html y elimine el lightning-layout-item que contiene dos etiquetas lightning-button.
    2. En su lugar, pegue el siguiente código:
          <lightning-layout-item flexibility="auto" padding="around-small" onbuttonclick={handleMultiply}>
      <template for:each={factors} for:item="factor">
        <c-button
          key={factor}
          label={factor}
          data-factor={factor}
          icon="utility:close">
        </c-button>
      </template>
    </lightning-layout-item>
      Observe que hemos trasladado la llamada a la función handleMultiply al controlador onbuttonclick en lightning-layout-item. Esto nos permite ahorrarnos tener que agregar un controlador en todos los botones, por lo que se genera un código más limpio de forma más rápida.
    3. Guarde el archivo.
    4. Abra controls.js y agregue esta propiedad factors en la clase Controls (Controles):
        factors = [0,2,3,4,5,6];
    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 (Sumar) y observe cómo aumenta el recuento.
    3. Haga clic en X 2 y verá que no ocurre nada. ¿Por qué? De forma predeterminada, un evento personalizado no se propaga pasando por el host.

      [Texto alternativo: Evento personalizado que no pasa por su contenedor.]
      Para que el evento (buttonclick) se propague a lightning-layout-item, tenemos que agregar bubbles:true en CustomEvent.
    4. Abra button.js y quite el comentario (elimine las barras // de delante) bubbles:true.

      [Texto alternativo:: Ahora, el evento personalizado se propaga pasando por su contenedor.]
    5. Guarde el archivo y vuelva a llevar a cabo la implementación.
    6. Actualice la página de la aplicación Event Comms.
Nota

Es posible que tenga que actualizar la página un par de veces para obtener los cambios desde la memoria caché y empezar a trabajar en la página.

    1. Ahora haga clic en Add (Sumar) para definir el recuento en 1.
    2. Haga clic en X 2 y observe cómo se multiplica el recuento por dos.
    3. Haga clic en X 6 y observe cómo se multiplica el recuento por seis.
    4. Haga clic en X 0 y observe se restablece el recuento en cero.
    5. Pruebe con los siguientes clics: Add (Sumar), X 2, X 5, X 2, Add (Sumar), X 2. O bien: Add (Sumar), X 3, X 2, X 2, Subtract (Restar), X 2, Subtract (Restar), X 2. También puede probar con otra combinación.

Póngase a prueba (es opcional, no vamos a revisar el código)

Agregue una segunda instancia del componente "button" (botón) en el componente "controls" (controles) para crear botones de división que aparezcan en el componente "numerator".

Resumen

En este paso, ha establecido la comunicación desde un componente secundario a su principal mediante un evento personalizado. Ha enviado el evento con y sin datos, y ha visto cómo afecta la propagación a las comunicaciones de componente secundario a componente principal. En el siguiente paso, vamos a centrarnos en las comunicaciones de componente principal a secundario.

Recursos

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