创建一个子组件并与之交互
在前面的步骤中,我们的代码库有所增加。现在,花一点时间将我们的清单列表组件重构为几个较小的组件。我们将把熊牌的代码移到一个新的组件中。
创建Bear Tile组件
- 在VS Code中,右键单击该
lwc
文件夹,然后单击SFDX:Create Lightning Web Component。 - 命名组件
bearTile
。 - 打开
bearList.html
并剪切<!-- Start bear tile -->
和之间的所有代码<!-- End bear tile -->
。 - 将代码粘贴到的
template
标签中bearTile.html
。完成后,bearTile.html
应如下所示。 - 将以下内容替换为
bearTile.js
:我们添加了一个
bear
装饰有的属性@api
。这会将bear
属性公开给任何父组件。 - 删除
bearList.css
。 bearTile.css
在bearTile
目录中创建一个新文件,并将以下代码粘贴到该文件中。- 打开
bearList.html
并更换<!-- Start bear tile -->
及<!-- End bear tile -->
与评论<c-bear-tile bear={bear}></c-bear-tile>
。一旦完成,bearList.html
应该看起来像这样。这
bear
将使用我们在前面的步骤中定义的属性引用我们的Bear Tile组件。请注意,我们的组件文件夹和文件已命名bearTile
,但我们添加的标签是c-bear-tile
。开头c
代表默认名称空间,在名称空间后附加小写字母,并用破折号分隔以前的大写字母。 - 将更新的代码部署到组织中并测试您的新列表组件。细微的渐变看起来应该更好。
与Bear List组件进行交互
游骑兵要求能够快速查看熊记录并对其进行编辑,而不必离开主页。让我们单击熊形图块,然后打开一个可编辑的熊形记录表格。
- 编辑
bearTile.html
以下代码并将其添加到<lightning-card title={bear.Name} class="bear-tile">
标签之后。我们添加了一个触发该
handleOpenRecordClick
功能的编辑按钮。使用actions
插槽将按钮放置在闪电卡上。插槽是父组件传递到组件主体的标记的占位符。 bearTile.js
在最后一个括号之前编辑并添加以下功能。代码重点:
handleOpenRecordClick
当用户单击熊图块的打开记录按钮时,将调用该函数。- 该函数创建并触发一个
bearview
包含熊记录ID的自定义事件。
- 编辑属性
bearList.html
并将其添加onbearview={handleBearView}
到c-bear-tile
标签。这使我们能够捕获bearview
由tile组件触发的事件。该事件在handleBearView
函数中处理。 - 将以下内容替换为
bearList.js
:代码重点:
- 我们导入一个导航mixin,它捆绑了处理导航的实用程序功能。使用mixin,我们可以在不扩展类的情况下向其添加功能。当一个类已经扩展了一个父类(一个类只能扩展一个父类)时,这很有用。
- 我们的课程将导航混入扩展到了
LightningElement
基础类。 - 我们
bearview
在handleBearView
函数中处理事件。我们从事件详细信息中提取熊记录ID,并使用导航mixin导航到熊记录页面。
- 将更新的代码部署到组织中,并测试您是否可以使用图块上的按钮图标导航到熊记录。
这就是步骤。我们已经将组件重构为两个较小的组件:Bear列表和Bear Tile。我们探索了如何使用@api
装饰器从父列表组件与子磁贴组件进行通信。我们还看到了如何通过自定义事件从孩子与父母进行交流。
在下一步中,我们将在Lightning页面中了解如何与其他组件进行交互。