DEX470

课程介绍

今天我们来聊聊如何在Salesforce中创建一个子组件，并且与它进行互动。这个过程其实挺简单的，我会一步一步地告诉你该怎么做。 首先，我们需要创建一个子组件。你可以把它想象成一个小的、独立的模块，它可以完成特定的功能。比如，你可能需要一个子组件来显示用户的详细信息，或者处理一些特定的用户输入。 创建子组件的步骤是这样的： 1. 打开你的Salesforce开发者控制台。 2. 选择“文件”菜单，然后点击“新建”>“Lightning组件”。 3. 给你的组件起个名字，比如“ChildComponent”。 4. 在组件中，你可以定义一些属性和方法。比如，你可以定义一个属性来接收父组件传递过来的数据。 接下来，我们需要让父组件和这个子组件进行互动。这通常涉及到数据的传递和事件的触发。 与子组件互动的步骤是这样的： 1. 在父组件中，使用``标签来引用子组件。 2. 你可以通过属性将数据从父组件传递到子组件。比如，如果你在子组件中定义了一个属性`message`，你可以在父组件中这样传递数据：``。 3. 如果子组件需要向父组件发送信息，你可以定义一个事件。子组件可以触发这个事件，父组件则可以监听这个事件并做出相应的反应。 举个例子，假设子组件中有一个按钮，点击这个按钮时，我们希望父组件能够知道并做出响应。你可以在子组件中定义一个事件，当按钮被点击时触发这个事件。然后，在父组件中监听这个事件，并在事件触发时执行一些操作。 这样，你就创建了一个子组件，并且实现了父组件与子组件之间的互动。这个过程虽然看起来有点复杂，但只要你多练习几次，就会变得非常顺手了。 希望这个解释对你有帮助！如果你有任何问题，随时问我哦。

课程章节

本课程共有 12 个章节

• 1

  Learning Objectives

  第 7 页

  同学们，今天我们来聊聊Lightning Web组件的基础知识。想象一下，你正在搭建一座乐高城堡，每个小积木块就像是我们的Lightning Web组件。我们的目标是学会如何搭建这些积木块，让它们能够互相配合，最终构建出一个功能强大的Salesforce应用。 首先，我们要学会如何构建这些积木块，也就是Lightning Web组件。这些组件可以在Salesforce的App Builder页面上使用，就像你在乐高城堡中选择不同的积木块来搭建不同的部分一样。 接下来，我们要让这些组件能够从Salesforce读取数据。想象一下，你的乐高城堡需要一些信息，比如城堡的名字或者城堡里住着谁。我们的组件也需要从Salesforce中获取这些信息，并且以几种不同的方式来展示它们。 然后，我们要实现组件之间的通信。这就像是乐高积木块之间的连接，无论是上下连接的亲子关系，还是并排连接的兄弟姐妹关系，我们都要让它们能够互相传递信息，协同工作。 最后，我们还要学会在组件中使用第三方JavaScript。这就像是在你的乐高城堡中加入一些特殊的装饰品，让城堡看起来更加独特和功能强大。 总结一下，通过本课程，你将学会： 1. 构建简单的Lightning Web组件。 2. 从单个记录中检索并显示数据。 3. 从记录列表中检索并显示数据。 4. 将功能封装到子组件中。 5. 使用事件进行跨组件通信。 6. 使用第三方JavaScript库来增强组件的功能。 希望你们能够通过这些学习，搭建出属于自己的Salesforce应用城堡！

  ▶ 播放视频 查看详情
• 2

  Refactoring Bear List Component

  第 59 页

  让我们来聊聊如何重构这个熊列表组件。想象一下，你有一个公园管理员的系统，他们需要快速查看所有熊的信息。现在，你已经有了一个叫做`bearList`的组件，这个组件可以帮助管理员在他们的主页上直接看到熊的目录。这很棒，对吧？ 但是，现在你想让这个列表更加模块化和易于管理。你决定将每个熊的信息展示部分——我们称之为“瓷砖”——单独提取出来，做成一个新的组件，叫做`bearTile`。这样做的好处是，每个熊的信息展示可以独立管理和更新，而不需要每次都去改动整个列表。 那么，具体怎么做呢？首先，你需要在`bearList`组件中，将原来直接展示熊信息的部分，替换成对新组件`bearTile`的引用。这样，`bearList`就变成了一个容器，它主要负责管理和展示多个`bearTile`组件。 每个`bearTile`组件则会负责展示单个熊的详细信息，比如名字、种类、位置等。你可以根据需要，在`bearTile`中添加更多的功能，比如点击某个熊的瓷砖，可以查看更详细的信息或者进行编辑。 通过这种方式，你的代码不仅变得更加清晰和易于维护，而且如果未来需要添加新的功能或者修改现有的展示方式，你只需要在`bearTile`组件中进行调整，而不需要改动整个`bearList`。 这就是重构的魅力，它让我们的代码更加灵活和强大。希望这个解释能帮助你理解如何将`bearList`组件中的熊信息展示部分重构到`bearTile`组件中。继续加油，你一定可以做得很好！

  ▶ 播放视频 查看详情
• 3

  Interacting with the Bear List Component

  第 60 页

  让我们来聊聊如何让游骑兵队更方便地查看和编辑熊的记录。想象一下，游骑兵们正在使用一个Salesforce的主页，他们需要快速查看每只熊的信息，并且希望能够直接在这个页面上进行编辑，而不需要跳转到其他页面。这听起来是不是很方便呢？ 首先，我们有一个“熊名单”组件，这个组件就像是一个展示熊信息的公告板。每只熊都有一个自己的“瓷砖”，也就是一个小方块，上面显示了这只熊的基本信息。现在，游骑兵们希望点击这个瓷砖，就能直接打开一个可以编辑的熊记录表格。 为了实现这个功能，我们需要做几件事情： 1. ，让瓷砖可点击，：我们需要设置这些熊瓷砖，使得当游骑兵点击它们时，能够触发一个动作。这个动作就是打开一个包含详细信息的熊记录表格。 2. ，打开可编辑的表格，：当瓷砖被点击后，我们需要确保打开的表格是可以编辑的。这意味着游骑兵们不仅可以看到熊的详细信息，还可以直接在表格中修改这些信息。 3. ，保持主页导航，：在整个过程中，游骑兵们不需要离开当前的主页。这样，他们就可以在查看和编辑熊记录的同时，仍然保持在主页上，方便他们进行其他操作。 通过这样的设置，游骑兵队就可以更加高效地管理熊的信息了。他们只需要点击一下，就能快速查看和编辑任何一只熊的记录，而不需要跳来跳去，节省了大量的时间和精力。这就是我们如何通过Salesforce的定制功能，来提升用户体验的一个小例子。希望这个解释对你有帮助！

  ▶ 播放视频 查看详情
• 4

  App Page

  第 61 页

  同学们，今天我们来聊聊Salesforce中的组件通信，特别是子组件如何与父组件进行沟通。想象一下，你和你的朋友在玩一个游戏，你需要传递信息给他。在Salesforce的世界里，组件之间的信息传递也是类似的。 首先，我们已经知道如何通过属性从父组件向子组件传递信息。这就像你告诉你的朋友一个秘密，他知道了，但还没有回应你。现在，我们需要让子组件也能向父组件发送信息，这就像是你的朋友也需要告诉你他的想法。 在Salesforce中，我们使用一种叫做CustomEvents的工具来实现这一点。你可以把它想象成一个特殊的信号弹，子组件发射这个信号弹，父组件就能接收到并做出反应。但是，这个信号弹有一个特点，它只能飞到最近的父组件那里，不会继续往上飞。这就像是你的信号弹只能飞到最近的树顶，而不是飞到天空的尽头。 如果你之前用过Aura组件，你会发现CustomEvents和Aura中的组件事件很像。不过，Aura的事件可以一直往上飞，直到有人让它停下来，而CustomEvents默认只飞一级。 所以，总结一下，当我们需要子组件向父组件发送信息时，我们就使用CustomEvents。它就像是一个只能飞到最近的树顶的信号弹，让父组件知道子组件有什么话要说。这样，组件之间的沟通就更加灵活和高效了。希望这个比喻能帮助大家更好地理解这个概念。

  ▶ 播放视频 查看详情
• 5

  How Custom Events Work? (Child to Parent)

  第 62 页

  让我们来聊聊自定义事件是如何在Salesforce的Lightning Web Components (LWC)中工作的，特别是从子组件向父组件传递信息的过程。 首先，想象一下你有一个子组件，里面有一个按钮。当用户点击这个按钮时，我们希望触发一个事件，这个事件会告诉父组件：“嘿，我被点击了！”并且还会传递一些额外的信息，比如是谁点击的按钮。 在子组件中，我们首先会创建一个函数，比如叫做`sendEvent`。这个函数的作用是创建一个自定义事件。我们可以给这个事件起个名字，比如`sampleEvent`，并且我们还可以在这个事件中附带一些数据，比如`作者`和`教师`的信息。 接下来，在父组件中，我们需要设置一个监听器来捕捉这个`sampleEvent`事件。我们通过设置一个属性，比如`onsampleEvent`，并将其值设为一个处理这个事件的函数，比如`handleSampleEvent`。这样，当子组件触发`sampleEvent`时，父组件中的`handleSampleEvent`函数就会被调用。 在`handleSampleEvent`函数中，我们可以通过`event.detail`来访问子组件传递过来的数据。为了查看这些数据，我们可以使用`JSON.stringify`方法将其转换为字符串，然后通过`console.log`或者`alert`显示出来。 关于`detail`属性，有一点需要注意：`CustomEvent`接口并不对`detail`属性的类型或结构做任何限制。这意味着你可以传递任何类型的数据。但是，为了安全和数据的一致性，最佳实践是只传递原始数据类型（如字符串、数字等），或者如果你需要传递对象，最好先将其复制到一个新对象中。这样做可以确保你只传递你想要的数据，并且接收方不能修改你的原始数据。 这就是自定义事件在LWC中从子组件向父组件传递信息的基本工作原理。希望这个解释能帮助你更好地理解这个过程！如果你有更多问题，随时欢迎提问。

  ▶ 播放视频 查看详情
• 6

  Interacting with Bear List Component

  第 63 页

  让我们来聊聊如何在Bear应用程序中通过自定义事件与Bear List组件进行互动。这个例子会帮助你理解如何在Salesforce的Lightning框架中使用自定义事件来传递信息。 首先，想象一下，我们有一个Bear List组件，它展示了一系列的熊卡片。每张熊卡片的右上角都有一个闪电按钮图标。这个按钮的作用是让用户点击后，能够查看这只熊的详细信息。 当用户点击这个按钮时，会发生以下几件事情： 1. ，触发自定义事件，：点击按钮后，`bearTile`组件会触发一个自定义事件。这个事件会携带一个重要的信息——被点击的那只熊的ID。这个ID就像是熊的唯一身份证，帮助我们识别是哪只熊被点击了。 2. ，处理事件，：接下来，`bearList`组件会接收到这个自定义事件。它通过一个叫做`DeliverBearView`的函数来处理这个事件。这个函数的作用是告诉系统：“嘿，有只熊被点击了，我们需要做点什么！” 3. ，存储和导航，：处理事件后，`BearView`组件会存储这个熊的ID。这个ID随后会被用来导航到这只熊的详细信息页面。虽然我们现在还不深入讨论如何导航，但你可以想象，这个ID就像是打开熊详细信息页面的钥匙。 总结一下，通过这种方式，我们可以在Bear应用程序中实现一个动态的交互：用户点击按钮，系统识别出是哪只熊，然后展示这只熊的详细信息。这个过程展示了如何在Salesforce Lightning框架中有效地使用自定义事件来增强应用的交互性和功能性。希望这个解释能帮助你更好地理解这个过程！

  ▶ 播放视频 查看详情
• 7

  Adding Functionality without Multiple Inheritance

  第 64 页

  让我们来聊聊如何在Salesforce的Lightning Web组件中添加功能，特别是在不能使用多重继承的情况下。想象一下，你正在建造一个房子，每个房间都有不同的功能，比如厨房、卧室和客厅。在编程中，我们也需要给不同的组件添加不同的功能。 首先，每个带有用户界面的Lightning Web组件都扩展了`LightningElement`类。这就像是你的房子有一个基础框架，所有的房间都是在这个框架上建造的。但是，JavaScript不允许我们一次扩展多个类，也就是说，你不能同时从厨房和卧室这两个类继承功能。 那么，如果我们已经在扩展`LightningElement`，如何将第二个类的方法添加到我们的组件中呢？这里就引入了Mixin的概念。Mixin就像是你可以在基础框架上添加的模块，比如你可以在房子的基础框架上添加一个厨房模块或者一个卧室模块。 具体来说，你可以在扩展`LightningElement`之前，将Mixin应用到它上面。这样，你就可以在不使用多重继承的情况下，为你的组件添加额外的功能。 举个例子，假设我们想要使用导航服务来打开一个熊的详细信息页面。为了使用导航服务，我们需要在组件中添加这个功能。通过使用Mixin，我们可以在扩展`LightningElement`之前，将导航服务的方法添加到我们的组件中。 总结一下，虽然JavaScript不允许我们一次扩展多个类，但通过使用Mixin，我们可以在不违反这个规则的情况下，为我们的Lightning Web组件添加额外的功能。这就像是在房子的基础框架上添加不同的模块，使得房子更加功能齐全。希望这个解释能帮助你更好地理解这个概念！

  ▶ 播放视频 查看详情
• 8

  What is a Mixin?

  第 65 页

  让我们来聊聊什么是Mixin。你可以把Mixin想象成是一种“调味料”，它可以给我们的代码“加料”，让我们的类拥有更多的功能，而不需要改变它原本的结构。 在编程中，尤其是JavaScript里，我们有时候会遇到这样的情况：一个类已经继承了另一个类，但我们还想给它添加更多的功能。这时候，如果我们再用继承的方式，就会变得很复杂，因为JavaScript不支持多重继承（也就是一个类不能同时继承多个类）。这时候，Mixin就派上用场了。 Mixin就像是一个“功能包”，你可以把它“混入”到任何一个类里，让这个类立刻拥有Mixin里的所有功能。这样做的好处是，我们不需要改变类的继承关系，就能轻松地扩展类的功能。 举个例子，假设我们有一个类叫做`LightningElement`，它已经继承了一个基础类。现在，我们想给它添加一些导航功能，比如跳转到其他页面的能力。这时候，我们可以使用`NavigationMixin`这个Mixin。我们只需要把这个Mixin“混入”到`LightningElement`里，`LightningElement`就立刻拥有了导航的功能，而不需要改变它原本的继承结构。 所以，简单来说，Mixin就是一种灵活的方式来给类添加功能，而不需要复杂的继承关系。它让我们的代码更加模块化，也更容易维护。

  ▶ 播放视频 查看详情
• 9

  NavigationMixin Methods

  第 66 页

  同学们，今天我们来聊聊Salesforce中的`NavigationMixin`。这个`NavigationMixin`是一个非常实用的工具，它可以帮助我们在Lightning Web Components（LWC）中轻松实现页面导航。 首先，`NavigationMixin`是一个“混入”（mixin），你可以把它想象成一个“插件”或者“扩展包”。当我们把这个混入应用到我们的组件中时，它会为我们的组件添加两个新的功能：`navigate()`和`generateUrl()`。 ### 1. `navigate()` 方法 这个方法的作用是帮助我们导航到应用程序中的另一个页面。比如说，你有一个按钮，点击这个按钮后，用户应该被带到另一个页面。这时候，你就可以使用`navigate()`方法来实现这个功能。 ### 2. `generateUrl()` 方法 这个方法的作用是生成一个URL。它会返回一个Promise，这个Promise最终会解析成一个URL。这个URL可以用来在页面上创建一个链接，或者在其他地方使用。 ### 代码示例 让我们来看一个简单的代码示例，看看如何在组件中应用`NavigationMixin`： ```javascript import { LightningElement } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default class MyCustomElement extends NavigationMixin(LightningElement) { handleNavigate() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'list' } }); } } ``` 在这个例子中，我们首先导入了`NavigationMixin`，然后把它应用到了我们的组件`MyCustomElement`中。接着，我们在组件中定义了一个`handleNavigate`方法，这个方法使用了`navigate()`来导航到Account对象的列表页面。 ### 总结 - `NavigationMixin`是一个混入，它为我们的组件添加了两个新方法：`navigate()`和`generateUrl()`。 - `navigate()`用于导航到应用程序中的另一个页面。 - `generateUrl()`用于生成一个URL。 希望这个解释能帮助大家更好地理解`NavigationMixin`的使用。如果有任何问题，欢迎随时提问！

  ▶ 播放视频 查看详情
• 10

  Navigation Service

  第 67 页

  今天我们来聊聊如何在Salesforce的Lightning Web Components (LWC) 中使用导航服务。这个过程其实很简单，我们只需要几个步骤就可以实现从一个页面导航到另一个页面的功能。 首先，我们需要从‘Lightning/Navigation’模块中导入一个叫做{NavigationMixin}的东西。这个{NavigationMixin}是一个非常有用的工具，它可以帮助我们在组件中轻松地实现页面导航。 接下来，我们定义一个类，叫做MyCustomElement。这个类会扩展（或者说继承）NavigationMixin和LightningElement。这样，我们的MyCustomElement就拥有了导航的能力。 在这个类中，我们会定义一个方法，叫做HandleBearView。这个方法会接收一个事件作为参数。在这个事件中，我们可以获取到一个Bear的ID。然后，我们使用{NavigationMixin.Navigate}方法来导航到这个Bear的记录页面。 具体来说，{NavigationMixin.Navigate}方法会接收一个对象作为参数。这个对象中，我们需要指定几个属性： - 类型（type）：这里我们设置为‘Standard__recordPage’，表示我们要导航到一个标准的记录页面。 - 属性（attributes）：这里我们需要指定记录的ID（recordID），对象名称（objectApiName），以及动作名称（actionName）。动作名称我们设置为‘view’，表示我们要查看这个记录。 这样，当HandleBearView方法被调用时，它就会导航到指定的Bear记录页面。 总结一下，使用导航服务的步骤是： 1. 导入‘Lightning/Navigation’模块中的{NavigationMixin}。 2. 定义一个类，扩展NavigationMixin和LightningElement。 3. 在这个类中定义一个方法，使用{NavigationMixin.Navigate}来实现页面导航。 希望这个解释能帮助你理解如何在LWC中使用导航服务。如果有任何问题，随时问我哦！

  ▶ 播放视频 查看详情
• 11

  4. Create a Child Component and Interact with It

  第 68 页

  让我们来聊聊如何在Salesforce中创建一个子组件，并让它与ItTasks进行交互。这个练习的目的是让你在熊的详细信息页面上添加一个新组件，叫做bearTile。这个组件会展示一只熊的信息，并且通过一个按钮，你可以直接跳转到这只熊的详细记录页面。 首先，我们需要理解几个关键点： 1. ，组件组成，：这意味着我们将创建一个新的组件，这个组件会包含在另一个更大的组件中。在这里，bearTile就是我们的子组件，它会被嵌入到熊的详细信息页面中。 2. ，自定义事件，：这是指我们可以在组件之间传递信息。比如，当你在bearTile组件中点击一个按钮时，可以触发一个事件，告诉父组件执行某些操作。 3. ，加载外部样式表，：为了让bearTile看起来更漂亮，我们会使用一些外部的CSS样式。这些样式可以帮助我们美化按钮和熊的显示方式。 4. ，导航服务，：这是Salesforce提供的一个工具，可以帮助我们在不同的页面之间跳转。在这个练习中，我们会用它来从bearTile跳转到熊的详细记录页面。 接下来，你需要按照以下步骤操作： 1. ，创建Bear Tile组件，：在Salesforce中，使用Lightning Web Components框架创建一个新的组件，命名为bearTile。这个组件会显示一只熊的信息，并且包含一个按钮。 2. ，与Bear List组件进行互动，：确保你的bearTile组件能够与父组件（比如Bear List）进行通信。这意味着当你在bearTile中点击按钮时，父组件能够接收到这个事件，并执行相应的操作，比如导航到熊的详细页面。 3. ，加载外部样式表，：在你的bearTile组件中，引入一些外部的CSS文件，来美化你的组件。这可以让你的按钮和熊的显示更加吸引人。 4. ，使用导航服务，：在bearTile组件中，设置一个按钮，当点击这个按钮时，使用Salesforce的导航服务跳转到熊的详细记录页面。 完成这些步骤后，记得将你的更改提交到本地存储库，并确认你已经成功完成了这个练习。你可以通过查看提交记录来确认这一点。 希望这些步骤能帮助你顺利完成这个练习！如果有任何疑问，随时提问。

  ▶ 播放视频 查看详情
• 12

  Custom Events - Fill in the Blanks

  第 69 页

  同学们，今天我们来聊聊如何在Salesforce的Lightning Web Components (LWC)中使用自定义事件。这个例子中，我们有一个父组件和一个子组件，父组件通过自定义事件与子组件通信。 首先，我们来看一下代码的结构。在父组件的HTML文件中，我们有一个子组件的标签 ``，并且我们监听了一个叫做 `sampleEvents` 的事件。当这个事件被触发时，父组件会执行一个叫做 `SampleEvents` 的函数。 ```html ``` 在父组件的JavaScript文件中，我们定义了这个 `SampleEvents` 函数。这个函数会弹出一个警告框，显示事件的详细信息。 ```javascript SampleEvents(event) { alert(JSON.stringify(event.detail)); } ``` 接下来，我们来看一下父组件如何发送这个自定义事件。在父组件的JavaScript文件中，我们定义了一个 `sendEvents` 函数。这个函数创建了一个自定义事件 `sampleEvents`，并且传递了一些详细信息，比如作者和讲师的名字。 ```javascript sendEvents() { const selectedEvents = new CustomEvent('sampleEvents', { detail: { author: "Rad", instructor: "EL Toro" } }); this.dispatchEvent(selectedEvents); } ``` 在子组件的JavaScript文件中，我们需要处理这个自定义事件。我们通过 `connectedCallback` 生命周期钩子来监听这个事件，并且在事件触发时执行相应的操作。 ```javascript connectedCallback() { this.addEventListener('sampleEvents', this.handleSampleEvents.bind(this)); } handleSampleEvents(event) { console.log('Event received:', event.detail); } ``` 最后，我们来总结一下这个流程： 1. ，样本事件，：父组件通过 `sendEvents` 函数发送一个自定义事件 `sampleEvents`。 2. ，详情，：这个事件携带了一些详细信息，比如作者和讲师的名字。 3. ，sendEvent，：父组件通过 `dispatchEvent` 方法将事件发送出去。 4. ，选择事件，：子组件通过 `addEventListener` 方法监听这个事件，并且在事件触发时执行相应的操作。 通过这种方式，父组件和子组件可以通过自定义事件进行通信，从而实现更复杂的交互逻辑。希望这个例子能帮助大家更好地理解LWC中的自定义事件机制。如果有任何问题，欢迎随时提问！

  ▶ 播放视频 查看详情