上节带您了解了如何将Lightning Web组件部署到组织，本节将为您介绍：在Salesforce开发过程中，如何处理Lightning Web组件中的事件。学习完本节内容后，您可以创建包含多个组件的应用程序、描述复杂组件的文件结构、处理事件。

 

上节您已经构建了一个组件并将其部署到组织，本节我们开始为事件处理添加一些交互性。我们通过几个组件跟踪事件的过程，以便在应用程序中处理复杂事件。此应用程序是bicycle shop的product selector。用户点击自行车名称和图像，就可以查看更多详细信息。

此应用程序有四个组件协同工作。

1、tile：显示单个项目。

2、list：排列tiles。

3、detail：点击某个tile时，会显示该tile的详细信息。

4、selector：包含整套组件。容器组件不是必需的，但我们在此处使用一个容器组件，以帮助处理事件。

目前，该应用程序使用数据文件加载静态数据进行测试。在下一单元中，您将学习如何从org中提取动态数据。

 

 

组件构成

现在让我们给项目添加一些可以部署到组织的文件。

1、在此处下载此应用程序的文件：Trailhead的Bike Selector应用程序。

2、将文件解压到bikeCard项目的lwc文件夹中

 

 

组件关系

在此应用程序中，多个组件协同工作，某些组件嵌套在其他组件中。就像HTML元素嵌套一样，Lightning Web组件（即自定义HTML元素）也可以嵌套在其他Lightning Web 组件中。在我们的文件系统中，组件的文件夹并不能让我们真正了解它们间的关系。让我们来看看这些组件是如何在UI层面上以图表的形式嵌套的。

通过查看文件，您可以看到selector组件布置了页面，并显示了list(c-list)和detail(c-detail)组件。

用以下内容更新detail.html：

在detail.html中，您可以看到lwc:if={product}和lwc:else。如果未从列表中选择任何内容，则显示一条要求用户选择的消息。如果选择了某些内容，就会显示Bike的详细信息。

 

list组件显示了多个tile(c-tile)组件，数据中的每个Bike都对应一个组件。这种嵌套是在每个父组件的HTML中实现的。例如，列表组件有以下HTML，包括c-tile的tile组件。

Bike项目的每次迭代都会生成一个新的tile组件。只要包含c-tile组件标签，每个tile组件就会成为它的子组件。div类定义container用于设置样式，因此您可以控制tile的排列。如果您查看list.css，就就看到它包装了内容。

父/子关系不仅对于应用程序的设计很重要，而且对于事件处理也很重要。接下来让我们更深入地研究一下事件处理。

 

 

事件向上，属性向下

在复杂组件（包含多个父组件和子组件）中，组件可以进行上下交流。

1、子组件c-todo-item向父组件c-todo-app派发一个事件。例如，当用户点击按钮时，子进程可以将事件对象传递给父进程，这样父进程就可以处理该事件并更改当前页面。

2、父组件c-todo-app传递或调用子组件的属性与方法。例如，父组件可以在子组件中设置文本值，或调用子组件的某个方法。

下面让我们来看看这种交流是如何进行的。

 

 

向上传递信息

可以使用 events和event listeners传递信息。子组件分派事件，父组件监听事件。分派事件包括创建子组件可以传递给父组件的事件对象。父组件有一个处理程序来响应该事件。例如，像这样的子组件包含一个nextHandler()方法，该方法使用CustomEvent()创建一个简单的事件对象，并在用户点击next按钮时派发事件类型next。

事件类型可以是任何字符串，但应符合DOM事件标准，即没有大写字母，没有空格，必要时使用下划线分隔单词。

 

父组件用内联事件处理程序监听带有on(onnext)前缀的事件。

并将事件对象传递给事件处理程序。

 

 

向下传递信息

可以使用公共属性和公共方法传递信息。您可以使用@api decorator将组件属性变成公共属性。然后通过外部组件来设置公共属性。

例如c-todo-item 子组件具有以下内容：

使用以下方法设置父节点的值：

itemName变量是使用kebab case属性item-name来设置的。JavaScript中的属性名称采用驼峰规则，而HTML属性名是串式的（用破折号分隔），以符合HTML标准。标记中的item-name属性映射到JavaScript的itemName属性。

 

公共属性是传递原始值、简单对象和数组的绝佳解决方案。此外，当获取或设置属性时，您可以使用getter和setter来执行一些逻辑。要记住，用@api decorator对它们进行注释，使它们对其他组件公开。同样地，您可以创建从父组件调用的公共方法。通过使用@api decorator在子组件中创建一个公共方法，然后从父组件中调用它。

 

假设我们有一个这样的子组件。

当c-video-player组件被包含在父组件中时，我们就可以像这样从父组件中调用该方法:

我们定义了一个方法handlePlay()来触发该事件。然后使用querySelector() DOM方法搜索名为c-video-player的DOM元素，并调用其公共方法。

 

 

在HTML中处理事件

因此，我们的选择器应用程序需要处理一种类型的事件--用户点击一个磁贴。当这种情况发生时，detail组件应该用相关tile的信息重新呈现。您可以用HTML（在模板中添加event listener）或JavaScript（编写event listener function）处理事件。我们推荐使用HTML方法，如下所示。

 

每个tile组件都监听用户的点击情况，因为tile组件的HTML(tile. HTML)包含一个onclick事件监听器。

当用户点击用户界面中的一个tile实例时，onclick监听器会调用tile.js JavaScript文件中的tileClick处理函数。

 

 

Selector App的事件模式

在product selector app中，我们使用了一个复杂的组件（包含多个父组件和子组件）。我们建议您通过组件的层次结构向上传播事件，以便父组件可以响应子事件。如果您有其他子组件，但不是触发事件的子组件，则可以将属性向下传递给这些子组件以响应事件。

模式如下所示：

为此，我们需要将event listeners和handlers在层次结构中向上链接到ebikes组件。然后向下传递传递一个属性给detail组件。在我们的文件中，您可以看到以下内容。

1、tile.html有调用tileClick处理程序的onclick事件监听器。

2、tile.js可以创建事件类型为tileClick的新CustomEvent和包含详细值(this.product.fields.Id.value)的对象。

3、list.html有调用handleTileClick处理程序的ontileclick监听器。

4、list.js有一个handleTileClick方法，它传入事件(evt)来创建另一个CustomEvent(productselected)，该对象也包含一个细节值evt.detail，并在JavaScript中派发该事件:

5、selector.html有一个onproductselected事件监听器，它调用handleProductSelected处理程序。

6、selector.js的handleProductSelected方法将selectedProductId设置为传入的event .detail值。

7、detail.html有一个条件指令，等待一个product值：

8、detail.js将这些部分结合起来，创建一个私有变量_productId来跟踪productId值的状态。然后使用get/set模式来获取该值，并将其设置为变量，让detail.html加载条件内容。

 

getter和setter是一种常见的JavaScript结构，它们允许您为属性分配添加逻辑和条件。

每次点击tile时，都会重复该过程。

 

 

将文件部署到组织

让我们将这些新的bikeCard项目文件部署到您的组织中，看看它是如何工作的。部署步骤与上节相同，打开org，在Lightning App Builder中用这个应用程序创建一个页面。

1、在VS Code bikeCard项目中，右键点击force-app/main/default文件夹，选择SFDX: Deploy Source to Org。

2、在VS Code的命令面板中，使用SSFDX: Open Default Or，打开您的组织。

3、使用selector组件创建一个区域页面。

4、给它一个标签：Your Bike Selection

5、将selector组件拖动到页面布局的顶部。

6、保存并为所有用户激活。

7、打开后可以看到组件已经出现在用户界面中。

 

到此，您就有了一个完全交互式的页面。下一节，我们尝试设置样式，并从组织获取实时数据。