Criar um componente filho e interagir com ele

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.

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

1. 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).
2. Dê ao componente o nome bearTile.
3. Abra bearList.html e corte todo o código entre <!-- Start bear tile --> e <!-- End bear tile -->.
4. Cole o código dentro das marcas template de bearTile.html. Quando terminar, bearTile.html deve ficar assim.

   <template>
   	<lightning-card title={bear.Name} class="bear-tile">
   		<div class="slds-var-p-horizontal_small">
   			<div class="slds-media">
   				<div class="slds-media__figure">
   					<img src={appResources.bearSilhouette} alt="Bear profile" class="bear-silhouette"/>
   				</div>
   				<div class="slds-media__body">
   					<p class="slds-var-m-bottom_xx-small">{bear.Sex__c}</p>
   					<p class="slds-var-m-bottom_xx-small">{bear.Age__c} years old</p>
   					<p class="slds-var-m-bottom_xx-small">{bear.Height__c} cm</p>
   					<p class="slds-var-m-bottom_xx-small">{bear.Weight__c} Kg</p>
   				</div>
   			</div>
   		</div>
   	</lightning-card>
   </template>

5. Substitua o conteúdo de bearTile.js por:

   import { LightningElement, api } from 'lwc';
   import ursusResources from '@salesforce/resourceUrl/ursus_park';
   export default class BearTile extends LightningElement {
   	@api bear;
   	appResources = {
   		bearSilhouette: `${ursusResources}/standing-bear-silhouette.png`,
   	};
   }

   Adicionamos uma propriedade bear decorada com @api. Isso expõe a propriedade bear a qualquer componente pai.
6. Exclua bearList.css.
7. Crie outro arquivo bearTile.css no diretório bearTile e cole o seguinte código no arquivo.

   :host {
   	--sds-c-card-color-background: linear-gradient(180deg, rgba(255,255,255,1) 80%, #fae8d2 100%);
   }
   
   .bear-tile {
   	display: block;
   	border: 1px solid #d2955d;
   	border-radius: .25rem;
   	background-color: #fae8d2;
   }
   
   .bear-silhouette {
   	height: 100px;
   }

8. 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.

   <template>
   	<lightning-card title="Bears" icon-name="utility:animal_and_nature">
   		<div class="slds-card__body slds-card__body_inner">
   			<!-- Start bear list -->
   			<template if:true={bears.data}>
   				<lightning-input type="search"
   					onchange={handleSearchTermChange}
   					variant="label-hidden"
   					class="slds-var-m-bottom_small"
   					label="Search"
   					placeholder="Search for bears"
   					value={searchTerm}>
   				</lightning-input>
   				<lightning-layout multiple-rows="true" pull-to-boundary="small">
   					<template for:each={bears.data} for:item="bear">
   						<lightning-layout-item key={bear.Id} size="3" class="slds-var-p-around_x-small">
   							<c-bear-tile bear={bear}></c-bear-tile>
   						</lightning-layout-item>
   					</template>
   				</lightning-layout>
   				<!-- No bears found -->
   				<template if:false={hasResults}>
   					<div class="slds-align_absolute-center slds-var-m-vertical_small">
   						This is beary disturbing, we did not find results...
   					</div>
   				</template>
   			</template>
   			<!-- End bear list -->
   			<!-- Data failed to load -->
   			<template if:true={bears.error}>
   				<div class="slds-text-color_error">
   					An error occurred while loading the bear list
   				</div>
   			</template>
   		</div>
   	</lightning-card>
   </template>

   Isso referencia nosso componente de bloco de urso com o atributo bear que definimos nas etapas anteriores. Observe que a pasta e os arquivos do nosso componente se chamam bearTile, mas a marca que adicionamos é c-bear-tile. O c 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.
9. 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.

1. Edite bearTile.html e adicione o código a seguir após a marca <lightning-card title={bear.Name} class="bear-tile">.

   <div slot="actions">
   	<lightning-button-icon
   		icon-name="utility:search"
   		icon-class="bear-tile-button"
   		variant="bare"
   		alternative-text="Open record"
   		onclick={handleOpenRecordClick}>
   	</lightning-button-icon>
   </div>

   Adicionamos um botão de edição que aciona a função handleOpenRecordClick. O botão é colocado no cartão do Lightning com o uso do slot actions. Um slot é um espaço reservado para marcação que um componente pai transmite ao corpo de um componente.
2. Edite bearTile.js e adicione a função a seguir antes do último colchete de fechamento.

   handleOpenRecordClick() {
   	const selectEvent = new CustomEvent('bearview', {
   		detail: this.bear.Id
   	});
   	this.dispatchEvent(selectEvent);
   }

   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.
3. Edite bearList.html e adicione um atributo onbearview={handleBearView} à marca c-bear-tile. Isso nos permite capturar o evento bearview que é acionado pelo componente de bloco. O evento é processado em uma função handleBearView.
   

   <c-bear-tile bear={bear} onbearview={handleBearView}></c-bear-tile>

4. Substitua o conteúdo de bearList.js por:

   import { NavigationMixin } from 'lightning/navigation';
   import { LightningElement, wire } from 'lwc';
   /** BearController.searchBears(searchTerm) Apex method */
   import searchBears from '@salesforce/apex/BearController.searchBears';
   export default class BearList extends NavigationMixin(LightningElement) {
   	searchTerm = '';
   	@wire(searchBears, {searchTerm: '$searchTerm'})
   	bears;
   	handleSearchTermChange(event) {
   		// Debouncing this method: do not update the reactive property as
   		// long as this function is being called within a delay of 300 ms.
   		// This is to avoid a very large number of Apex method calls.
   		window.clearTimeout(this.delayTimeout);
   		const searchTerm = event.target.value;
   		// eslint-disable-next-line @lwc/lwc/no-async-operation
   		this.delayTimeout = setTimeout(() => {
   			this.searchTerm = searchTerm;
   		}, 300);
   	}
   	get hasResults() {
   		return (this.bears.data.length > 0);
   	}
   	handleBearView(event) {
   		// Get bear record id from bearview event
   		const bearId = event.detail;
   		// Navigate to bear record page
   		this[NavigationMixin.Navigate]({
   			type: 'standard__recordPage',
   			attributes: {
   				recordId: bearId,
   				objectApiName: 'Bear__c',
   				actionName: 'view',
   			},
   		});
   	}
   }

   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ção handleBearView. 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.
5. 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.