Comunicar de pai para filho

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Para permitir a comunicação de um componente pai para um componente filho, o filho expõe uma propriedade ou função para torná-la pública. Em seguida, o pai pode atualizar a propriedade pública do filho ou chamar a função pública do filho.

Além disso, se você quiser adicionar funcionalidade, atualize a propriedade pública para um getter e setter no componente filho.

Vamos começar com uma atualização de propriedade pública simples. Outra unidade de negócios encontra o Numerator criado por você. Eles querem usá-lo e adicionar a ele. A primeira solicitação é ter a capacidade de definir o número inicial do contador. Não queremos fazer mudanças que afetem o caso de uso de negócios original, ou seja, vamos encapsular o componente numerator em outro componente que vai conter a nova funcionalidade. 

Atualizar uma propriedade pública

O decorador @api no componente filho expõe uma propriedade e a torna pública para que o componente pai possa atualizá-la.

1. Exponha uma propriedade pública no componente filho (numerator):
   

1. No Visual Studio Code, abra numerator.js e aplique o decorador @api à propriedade counter:
   

     @api counter = 0;

2. Importe o decorador api do módulo lwc.
   
3. Salve o arquivo.
   

2. Crie e programe um novo componente pai chamado augmentor:
   

1. Crie um componente Web do Lightning chamado augmentor.
   
2. Em augmentor.js, cole este código dentro da classe Augmentor:
   

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

3. Salve o arquivo.
   
4. Abra augmentor.html e adicione este código entre as tags 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. Salve o arquivo.
   
6. Atualize augmentor.js-meta.xml para disponibilizar o componente augmentor nas páginas de aplicativo do Lightning:
   

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

7. Salve o arquivo.
   

3. Adicione o novo componente (augmentor) à página do aplicativo Event Comms:
   

1. Implante a pasta lwc e atualize a página do aplicativo Event Comms.
   
2. Abra a página do aplicativo Event Comms para edição.
   
3. Arraste o componente augmentor até a região central da página.
   
4. Clique em Save (Salvar) e saia do Criador de aplicativo Lightning.
   

4. Verifique as comunicações:
   

1. Para ver as mudanças no Salesforce, atualize a página do aplicativo Event Comms.
   
2. Digite um número no campo Set Starting Counter (Definir contador inicial).
   A contagem é atualizada com o que você inseriu.
   
3. Clique em um dos botões multiplicadores.
   Observe que o contador é atualizado, mas o campo Set Starting Counter (Definir contador inicial) continua igual.
   
4. Mude os valores no componente numerator original.
   Ele continua a funcionar como esperado.
   

Como colocamos Set Starting Counter (Definir contador inicial) em seu próprio componente (augmentor) em vez de adicioná-lo ao componente numerator, numerator continua a servir como caso de negócios original. Agora, numerator recebe informações do filho (controls) e do pai (augmentor).

Chamar uma função pública

A segunda solicitação da empresa é aumentar o contador em um milhão. Eles não querem que Set Starting Count (Definir contador inicial) mude. Isso significa que não podemos apenas atualizar a propriedade startCounter. Também não temos o contador atual no componente augmentor ao qual adicionar. Chamaremos uma função pública no filho para fazer a atualização por nós.

O decorador @api no componente filho expõe uma função e a torna pública para que o componente pai possa chamá-la.

1. Crie uma função pública no componente filho (numerator):
   

1. Abra numerator.js e adicione esta função maximizeCounter depois da função handleMultiply:
   

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

2. Salve o arquivo.
   

2. No componente pai (augmentor), adicione um botão e seu manipulador:
   

1. Abra augmentor.js e adicione esta função handleMaximizeCounter depois da função handleStartChange:
   

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

   Essa função encontra a tag c-numerator em augmentor.html e chama a função pública maximizeCounter.
   
2. Salve o arquivo.
   
3. Abra augmentor.html e adicione esse lightning-button depois de lightning-input de Set Starting Counter:
   

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

4. Salve o arquivo.
   

3. Verifique as comunicações:
   

1. Para ver as mudanças no Salesforce, implante a pasta lwc e atualize a página do aplicativo Event Comms.
   
2. Clique em Add 1m To Counter (Adicionar 1 milhão ao contador).
   O contador aumenta em um milhão.
   

No pai (augmentor), o novo botão aciona o manipulador handleMaximizeCounter, que chama o componente filho (numerator) e aciona sua função pública maximizeCounter.

Usar Getter e Setter públicos

Este exercício é muito semelhante ao qual foi usado para atualizar uma propriedade no início desta etapa. Na verdade, não vamos mudar o componente pai nem um pouco. No componente filho, vamos apenas implementar a propriedade counter pública com um getter e setter públicos.

As duas unidades de negócios que usam Event Comms estão amando as atualizações. Agora, elas gostariam de ver o valor prévio do contador à medida que ele muda. Precisamos de uma forma de capturar o contador atual sempre que mudamos a propriedade counter. Podemos obter o contador atual e salvá-lo antes de definir um novo valor. Vamos usar uma nova variável privada chamada _currentCount para podermos trabalhar com ela. Para conter o contador anterior e permitir a exibição, vamos usar uma variável chamada priorCount.

Para a funcionalidade extra, implementamos a propriedade counter como getter e setter (get e set, também chamada de propriedade accessor). Assim, sempre que o contador for ativado, armazenaremos o valor do contador atual (_currentCount) na variável priorCount antes de definir o novo valor do contador.

1. Adicione um contador prévio ao componente filho (numerator):
   

1. Abra numerator.html e adicione este parágrafo logo antes do parágrafo com Count:
   

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

2. Salve o arquivo.
   
3. Abra numerator.js e torne @api counter = 0; um comentário (adicione // ao início da linha).
   
4. Após o comentário, adicione este código:
   

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

   Este código muda counter para uma propriedade com funções getter (get) e setter (set). Ele também adiciona as propriedades priorCount e _currentCount.
   
5. Salve o arquivo.
   

2. Verifique as comunicações:
   

1. Para ver as mudanças no Salesforce, implante a pasta lwc e atualize a página do aplicativo Event Comms.
   
2. Clique em Add (Adicionar), X2 e Add 1m To Counter (Adicionar 1 milhão ao contador) para mudar o valor do contador.
   O Contador prévio se mantém sincronizado à medida que o contador é atualizado.
   
3. Clique em botões nos componentes Numerator e Augmentor para ver se a funcionalidade original não foi afetada.
   

Atualizamos o componente numerator para usar getter e setter a fim de atualizar a nova propriedade priorCount. O componente pai (augmentor) ainda envia informações (startCounter) ao componente filho (numerator). Mas agora, numerator usa getter e setter para get (obter) a propriedade _currentCount e set (definir) as propriedades _currentCount e priorCount.

Desafie-se (opcional; não vamos conferir este código)

Atualize handleMaximizeCounter e maximizeCounter para aceitar um argumento que especifique o número a ser adicionado ao contador. Dica: analise o que você fez na etapa 1 para enviar um data-factor com o evento personalizado multiply.

Resumo

Você viu as comunicações de filho para pai e de pai para filho entre componentes Web do Lightning. Na próxima etapa, você usará o Lightning Message Service para fazer a comunicação entre componentes que não tenham uma relação pai-filho.

Recursos

• YouTube: Componentes web do Lightning: Componentes pai-filho
• Guia de desenvolvimento de componentes Web do Lightning: Criar e enviar eventos
• GitHub: Receitas de LWC: apiProperty
• GitHub: Receitas de LWC: apiSetterGetter
• Blog de desenvolvedores do Salesforce: Padrões de comunicação entre componentes para componentes Web do Lightning