Criar um componente filho e interagir com ele
Nossa base de código cresceu nas últimas etapas. Vamos tirar um instante para refatorar nosso componente de lista de ursos em vários componentes menores. Vamos mover o código dos blocos de ursos para um novo componente.
Criar o componente de bloco de urso
- No VS Code, clique com o botão direito do mouse na pasta
lwc
e clique em SFDX: Create Lightning Web Component (Criar componente Web do Lightning). - Dê ao componente o nome
bearTile
. - Abra
bearList.html
e corte todo o código entre<!-- Start bear tile -->
e<!-- End bear tile -->
. - Cole o código dentro das marcas
template
debearTile.html
. Quando terminar,bearTile.html
deve ficar assim. - Substitua o conteúdo de
bearTile.js
por: Adicionamos uma propriedadebear
decorada com@api
. Isso expõe a propriedadebear
a qualquer componente pai. - Exclua
bearList.css
. - Crie outro arquivo
bearTile.css
no diretóriobearTile
e cole o seguinte código no arquivo. - Abra
bearList.html
e substitua o conteúdo entre os comentários<!-- Start bear tile -->
e<!-- End bear tile -->
por<c-bear-tile bear={bear}></c-bear-tile>
. Quando terminar,bearList.html
deve ficar assim. Isso referencia nosso componente de bloco de urso com o atributobear
que definimos nas etapas anteriores. Observe que a pasta e os arquivos do nosso componente se chamambearTile
, mas a marca que adicionamos éc-bear-tile
. Oc
do início representa o namespace padrão, acrescido do nome do componente em minúsculas, com traços separando o que costumavam ser maiúsculas. - Implante o código atualizado na organização e teste seu novo componente de lista. Ele deve ficar melhor com um leve gradiente.
Interagir com o componente de lista de ursos
Os guardas estão pedindo para ter a capacidade de olhar rapidamente o registro de um urso e editá-lo sem ter que sair da página inicial. Vamos tornar os blocos de ursos clicáveis para abrir um formulário de registro de urso editável.
- Edite
bearTile.html
e adicione o código a seguir após a marca<lightning-card title={bear.Name} class="bear-tile">
. Adicionamos um botão de edição que aciona a funçãohandleOpenRecordClick
. O botão é colocado no cartão do Lightning com o uso do slotactions
. Um slot é um espaço reservado para marcação que um componente pai transmite ao corpo de um componente. - Edite
bearTile.js
e adicione a função a seguir antes do último colchete de fechamento. Destaques do código:- A função
handleOpenRecordClick
é chamada quando um usuário clica no botão para abrir o registro de um bloco de urso. - A função cria e aciona um evento
bearview
personalizado que contém a ID de registro do urso.
- A função
- Edite
bearList.html
e adicione um atributoonbearview={handleBearView}
à marcac-bear-tile
. Isso nos permite capturar o eventobearview
que é acionado pelo componente de bloco. O evento é processado em uma funçãohandleBearView
.
- Substitua o conteúdo de
bearList.js
por: Destaques do código:- Importamos um mixin de navegação que reúne funções de utilitários que lidam com navegação. Um mixin permite adicionar funcionalidades a uma classe sem estendê-la. Isso é útil quando uma classe já estende uma classe pai (uma classe só pode estender um único pai).
- Nossa classe estende o mixin de navegação aplicado à classe base
LightningElement
. - Processamos o evento
bearview
na funçãohandleBearView
. Extraímos a ID de registro de urso dos detalhes do evento e usamos o mixin de navegação para navegar até uma página de registro de urso.
- Implante o código atualizado na organização e teste se você consegue navegar até um registro de urso com o ícone de botão em um bloco.
É tudo para esta etapa. Refatoramos nosso componente em dois componentes menores: a lista de ursos e um bloco de urso. Exploramos como comunicar do componente de lista pai para o componente de bloco filho com um decorador @api
. Também vimos como comunicar de um filho com um pai usando um evento personalizado.
Na próxima etapa, veremos como interagir com outros componentes em uma página do Lightning.