student-browser custom component - 125

DEX602 - Unit 2 Introducing Lightning Web Components

📄 第 125 页 🎬 视频课程

课程章节介绍

同学们,今天我们要来做一个有趣的练习。在这个练习中,我们会创建一个新的组件,叫做`studentTiles`。这个组件的作用是显示一个学生列表。听起来很简单,对吧?但在这个过程中,我们会学到两个非常重要的概念:生命周期钩子和迭代器。 首先,我们来谈谈生命周期钩子。在Salesforce的Lightning Web Components(LWC)中,生命周期钩子是一些特殊的方法,它们在组件的不同阶段自动被调用。今天我们要用到的钩子是`constructor()`。这个钩子在组件被创建时自动调用。我们可以在这里做一些初始化的工作,比如创建一个硬编码的学生数组。虽然现在我们是手动输入学生数据,但以后我们会从数据库中获取这些数据。 接下来,我们要用到迭代器。迭代器的作用是让我们能够遍历一个数组或列表。在我们的例子中,我们会遍历那个硬编码的学生列表,并为每一个学生创建一个`c-student-tile`组件。这样,每个学生都会有一个自己的小卡片显示在页面上。 总结一下,今天我们要做的是: 1. 使用`constructor()`生命周期钩子来初始化一个学生数组。 2. 使用迭代器遍历这个数组,并为每个学生创建一个`c-student-tile`组件。 这样,我们就能在页面上看到一个漂亮的学生列表了。是不是很简单呢?让我们开始动手吧!