使用Lightning Web组件构建Bear-tracking应用程序

使用Lightning Web组件构建Bear-tracking应用程序 – 创建一个子组件并与之交互

创建一个子组件并与之交互

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

创建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.cssbearTile目录中创建一个新文件,并将以下代码粘贴到该文件中。
    .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. 将更新的代码部署到组织中并测试您的新列表组件。细微的渐变看起来应该更好。

Ursus Park主页上具有自定义样式的熊列表

与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基础类。
    • 我们bearviewhandleBearView函数中处理事件。我们从事件详细信息中提取熊记录ID,并使用导航mixin导航到熊记录页面。
  5. 将更新的代码部署到组织中,并测试您是否可以使用图块上的按钮图标导航到熊记录。

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

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

你可能也会喜欢...