在前面的步骤中，我们的代码库有所增加。现在，花一点时间将我们的清单列表组件重构为几个较小的组件。我们将把熊牌的代码移到一个新的组件中。

创建Bear Tile组件

1. 在VS Code中，右键单击该lwc文件夹，然后单击SFDX：Create Lightning Web Component。
2. 命名组件bearTile。
3. 打开bearList.html并剪切<!-- Start bear tile -->和之间的所有代码<!-- End bear tile -->。
4. 将代码粘贴到的template标签中bearTile.html。完成后，bearTile.html应如下所示。

   <template>
   	<lightning-card title={bear.Name} class="bear-tile">
   		<div class="slds-var-p-horizontal_small bear-tile-body">
   			<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. 将以下内容替换为bearTile.js：

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

   我们添加了一个bear装饰有的属性@api。这会将bear属性公开给任何父组件。

6. 删除bearList.css。
7. bearTile.css在bearTile目录中创建一个新文件，并将以下代码粘贴到该文件中。

   .bear-tile {
     border: 1px solid #d2955d;
     background-color: #fae8d2;
     border-radius: .25rem;
     display: block;
   }
   .bear-silhouette {
     height: 100px;
   }
   .bear-tile-body {
     background: linear-gradient(180deg, rgba(255,255,255,1) 80%, #fae8d2 100%);
   }
8. 打开bearList.html并更换<!-- Start bear tile -->及<!-- End bear tile -->与评论<c-bear-tile bear={bear}></c-bear-tile>。一旦完成，bearList.html 应该看起来像这样。

   <template>
   	<lightning-card title="Bears" icon-name="utility:animal_and_nature">
   		<div class="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>

   这bear将使用我们在前面的步骤中定义的属性引用我们的Bear Tile组件。请注意，我们的组件文件夹和文件已命名bearTile，但我们添加的标签是c-bear-tile。开头c代表默认名称空间，在名称空间后附加小写字母，并用破折号分隔以前的大写字母。

9. 将更新的代码部署到组织中并测试您的新列表组件。细微的渐变看起来应该更好。

与Bear List组件进行交互

游骑兵要求能够快速查看熊记录并对其进行编辑，而不必离开主页。让我们单击熊形图块，然后打开一个可编辑的熊形记录表格。

1. 编辑bearTile.html以下代码并将其添加到<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>

   我们添加了一个触发该handleOpenRecordClick功能的编辑按钮。使用actions插槽将按钮放置在闪电卡上。插槽是父组件传递到组件主体的标记的占位符。

2. bearTile.js在最后一个括号之前编辑并添加以下功能。

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

   代码重点：

   • handleOpenRecordClick当用户单击熊图块的打开记录按钮时，将调用该函数。
   • 该函数创建并触发一个bearview包含熊记录ID的自定义事件。
3. 编辑属性bearList.html并将其添加onbearview={handleBearView}到c-bear-tile标签。这使我们能够捕获bearview由tile组件触发的事件。该事件在handleBearView函数中处理。

   <c-bear-tile bear={bear} onbearview={handleBearView}></c-bear-tile>
4. 将以下内容替换为bearList.js：

   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',
   			},
   		});
   	}
   }

   代码重点：

   • 我们导入一个导航mixin，它捆绑了处理导航的实用程序功能。使用mixin，我们可以在不扩展类的情况下向其添加功能。当一个类已经扩展了一个父类（一个类只能扩展一个父类）时，这很有用。
   • 我们的课程将导航混入扩展到了LightningElement基础类。
   • 我们bearview在handleBearView函数中处理事件。我们从事件详细信息中提取熊记录ID，并使用导航mixin导航到熊记录页面。
5. 将更新的代码部署到组织中，并测试您是否可以使用图块上的按钮图标导航到熊记录。

这就是步骤。我们已经将组件重构为两个较小的组件：Bear列表和Bear Tile。我们探索了如何使用@api装饰器从父列表组件与子磁贴组件进行通信。我们还看到了如何通过自定义事件从孩子与父母进行交流。

在下一步中，我们将在Lightning页面中了解如何与其他组件进行交互。