Salesforce Lightning Design System: Criando Layouts Responsivos com Grid Utility Classes

Salesforce Lightning Design System: Utility Classes Styling

Salesforce Lightning Design System: Utility Classes Layout - Um Guia Completo

Neste artigo, você aprenderá como trabalhar com eventos em Lightning Web Components (LWC) para construir aplicações Salesforce reativas e escaláveis. Vamos cobrir os seguintes tópicos:
<ul>
<li>Introdução aos eventos em LWC</li>
<li>Eventos personalizados e eventos de componente</li>
<li>Propagação de eventos</li>
<li>Tratando eventos em componentes pais</li>
<li>Exemplo de implementação</li>
<li>Melhores práticas e considerações de desempenho</li>
</ul>
<h2>Introdução aos Eventos em LWC</h2>
Eventos são um conceito fundamental em LWC, pois permitem que componentes se comuniquem e troquem informações entre si. Existem dois tipos de eventos em LWC: eventos personalizados e eventos de componente.
<h3>Eventos Personalizados</h3>
Eventos personalizados são eventos criados pelo desenvolvedor para transmitir informações específicas entre componentes. Eles são semelhantes aos eventos customizados do DOM e permitem que os componentes publiquem e escutem informações específicas.
<h3>Eventos de Componente</h3>
Eventos de componente são eventos pré-definidos que permitem que os componentes publiquem e escutem informações genéricas. Esses eventos incluem:
<ul>
<li><code>change</code>: Dispara quando o valor de um elemento de formulário muda.</li>
<li><code>input</code>: Dispara quando o valor de um elemento de formulário é alterado.</li>
<li><code>click</code>: Dispara quando um elemento é clicado.</li>
</ul>
<h2>Propagação de Eventos</h2>
Eventos em LWC podem ser propagados para cima no DOM, permitindo que componentes filhos se comuniquem com componentes pais. A propagação de eventos é controlada por meio dos modificadores <code>bubbles</code> e <code>composed</code>.
<ul>
<li>O modificador <code>bubbles</code> determina se o evento pode ser propagado para cima no DOM.</li>
<li>O modificador <code>composed</code> determina se o evento pode atravessar a fronteira do shadow DOM.</li>
</ul>
<h2>Tratando Eventos em Componentes Pais</h2>
Para escutar e processar eventos em componentes pais, é possível utilizar a sintaxe de template do LWC ou o método <code>addEventListener</code>.
<h3>Sintaxe de Template</h3>
A sintaxe de template permite que você escute e processe eventos diretamente em um componente pai:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;template>
 &#x3C;c-meu-componente @meu-evento={handleMeuEvento}>&#x3C;/c-meu-componente>
&#x3C;/template></code></pre></figure>
<h3>Método addEventListener</h3>
O método <code>addEventListener</code> permite que você escute e processe eventos em componentes pais por meio de JavaScript:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="javascript" data-theme="github-dark"><code data-language="javascript" data-theme="github-dark" style="display: grid;">connectedCallback() {
 this.template.querySelector('c-meu-componente').addEventListener('meu-evento', this.handleMeuEvento);
}
 
handleMeuEvento(event) {
 // Lógica de manipulação do evento
}</code></pre></figure>
<h2>Exemplo de Implementação</h2>
Vamos criar um exemplo simples para demonstrar o uso de eventos em LWC:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="javascript" data-theme="github-dark"><code data-language="javascript" data-theme="github-dark" style="display: grid;">// meuComponente.js
import { LightningElement, api, track } from 'lwc';
 
export default class MeuComponente extends LightningElement {
 @api minhaPropriedade;
 
 @track minhaOutraPropriedade;
 
 handleChange() {
 this.minhaOutraPropriedade = this.minhaPropriedade * 2;
 this.dispatchEvent(new CustomEvent('minhaalterou', { detail: this.minhaOutraPropriedade }));
 }
}</code></pre></figure>
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;!-- meuComponente.html -->
&#x3C;template>
 &#x3C;lightning-input label="Minha Propriedade" value={minhaPropriedade} onchange={handleChange}>&#x3C;/lightning-input>
 &#x3C;p>Minha Outra Propriedade: {minhaOutraPropriedade}&#x3C;/p>
&#x3C;/template></code></pre></figure>
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="javascript" data-theme="github-dark"><code data-language="javascript" data-theme="github-dark" style="display: grid;">// meuPaiComponente.js
import { LightningElement } from 'lwc';
 
export default class MeuPaiComponente extends LightningElement {
 minhaPropriedadeDoPai = 5;
 
 handleMinhaAlterou(event) {
 this.minhaPropriedadeDoPai = event.detail;
 }
}</code></pre></figure>
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;!-- meuPaiComponente.html -->
&#x3C;template>
 &#x3C;c-meu-componente minha-propriedade={minhaPropriedadeDoPai}>&#x3C;/c-meu-componente>
 &#x3C;p>Minha Propriedade do Pai: {minhaPropriedadeDoPai}&#x3C;/p>
&#x3C;/template></code></pre></figure>
<h2>Melhores Práticas e Considerações de Desempenho</h2>
<ul>
<li>Utilize eventos personalizados apenas quando necessário.</li>
<li>Evite a propagação de eventos desnecessária.</li>
<li>Utilize os modificadores <code>bubbles</code> e <code>composed</code> com cuidado.</li>
<li>Escute e processe eventos nos componentes pais apenas quando necessário.</li>
<li>Considere o desempenho ao utilizar eventos em aplicações complexas.</li>
</ul>
<h2>Leitura Adicional</h2>
<ul>
<li><a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_overview">Documentação Oficial do LWC sobre Eventos</a></li>
<li><a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_dom">Utilizando Eventos do DOM no LWC</a></li>
<li><a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_create_custom">Utilizando Eventos Personalizados no LWC</a></li>
<li><a href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_parent_component">Trabalhando com Eventos em Componentes Pais no LWC</a></li>
</ul>

Code Referral.

Utilizando Eventos em Lightning Web Components

Compartilhe:

Categorias

Post Suggestions

Salesforce Lightning Design System: Criando Layouts Responsivos com Grid Utility Classes

Salesforce Lightning Design System: Utility Classes Styling

Salesforce Lightning Design System: Utility Classes Layout - Um Guia Completo