Aura 组件和 Lightning Web 组件可以存在于同一个应用程序中。本部分通过将概念从 Aura 组件映射到 Lightning Web 组件，帮助您迁移组件并应用现有技能。
有关如何将概念从 Aura 组件映射到 Lightning Web 组件的图形说明，请参阅此 Medium 帖子。
适用于 Aura 开发人员的 Lightning Web 组件 Trailhead 模块是帮助您了解 Lightning Web 组件的另一个资源。
迁移策略
Lightning Web 组件的编程模型与 Aura 组件的模型根本不同。迁移组件不是逐行转换，这是重新审视组件设计的好机会。在迁移 Aura 组件之前，请评估组件的属性、接口、结构、模式和数据流。
最容易迁移的组件是仅呈现 UI 的简单组件。通过迁移更大的组件树（组件中的组件）而不是单个组件，您可以获得更高的性能和开发人员的工作效率。但是，迁移一个组件并查看 Aura 编程模型中的概念如何映射到 Lightning Web 组件编程模型中的概念是一种有用的学习体验。
迁移一个组件后，你将能够更好地确定你和你的组织是否有必要：
- 进行更大规模的迁移工作
- 仅将 Lightning Web 组件用于新组件
- 暂时坚持使用 Aura 组件
选择权由您决定，每个人的选择都不同，具体取决于用例和可用资源。无论您做出什么决定，迁移组件都是一项有价值的学习练习。
选择要迁移的组件
要决定是否迁移组件，首先要了解 Aura 组件和 Web 组件如何协同工作，然后评估组件的使用方式和位置。
在选择要迁移的组件之前，请确保您了解 Aura 组件中的分面概念。
让我们回顾一下有关 Lightning Web 组件和 Aura 组件如何协同工作的最重要的事实。
- Lightning Web 组件和 Aura 组件可以在同一运行时中共存。
- Aura 组件可以包含 Lightning Web 组件。
- Lightning Web 组件不能包含 Aura 组件。
- 如果 Aura 组件具有包含其他 Aura 组件的 face，则您也必须迁移这些其他 Aura 组件。
迁移组件包文件
Aura 编程模型与 Lightning Web 组件编程模型的组件包文件结构不同。
以下是文件在两个编程模型之间的映射方式。
| 资源 | Aura 文件 | 闪电网络组件文件 | 另见 |
|---|---|---|---|
| 标记 | sample.cmp | sample.html | 组件 HTML 文件 |
| 控制器 | sampleController.js | sample.js | 组件 JavaScript 文件 |
| 助手 | sampleHelper.js | sample.js | Lightning 组件开发人员指南：帮助程序 |
| 渲染 | sampleRenderer.js | sample.js | Lightning 组件开发人员指南：渲染器 |
| CSS的 | sample.css | sample.css | 组件 CSS 文件 |
| 文档 | sample.auradoc | 目前不可用 | Lightning 组件开发人员指南：组件文档 |
| 设计 | sample.design | sample.js-meta.xml | 组件配置文件 |
| SVG | sample.svg | 目前不可用 | Lightning 组件开发人员指南：自定义图标 |
注意
Aura 组件中的控制器、帮助程序和渲染器文件映射到 Lightning Web 组件中的一个 JavaScript 文件。
迁移标记
Aura 文件包含标记，包括特定于 Aura 的标签。让我们看看此标记如何映射到 Lightning Web 组件中的等效概念。.cmp
迁移属性
将属性从 Aura 组件中的标签迁移到 Lightning Web 组件中的 JavaScript 属性。<aura:attribute>
让我们看一下 Aura 组件中的属性。myAttribute
<aura:component>
<aura:attribute name="myAttribute" default="Hello" />
</aura:component>在 Lightning Web 组件中，我们改用名为 JavaScript 的属性。myAttribute
// myComponentName.js
import { LightningElement, api } from "lwc";
export default class MyComponentName extends LightningElement {
@api myAttribute = "Hello";
}修饰器定义为公共属性。请参阅公共属性。@apimyAttribute
引用组件的 HTML 文件中的属性。
<!-- myComponentName.html -->
<template> {myAttribute} </template>Lightning Web 组件中的布尔属性值是在标记中设置的，没有指示和值。该值由属性的存在 （） 或不存在 （） 设置。在 JavaScript 中，可以使用动态计算值设置布尔属性值。如果布尔属性的值计算为 ，则会将其从 DOM 中删除。请参见布尔属性。 truefalsetruefalsefalse
重要
Lightning Web 组件必须完全支持转换后的 Aura 组件的属性。如果没有，则会出现错误和破损。
迁移迭代
将 Aura 组件中的标签迁移到 Lightning Web 组件中。<aura:iteration>for:each
下面是 Aura 语法。
<aura:iteration items="{!v.items}" itemVar="item"> {!item} </aura:iteration>下面是 Lightning Web 组件语法。
<template for:each={items} for:item="item">
<p key={item.id}>{item}</p>
</template>请注意，必须使用 a 为列表中的每个项目分配唯一值。请参阅渲染列表。key
您无法像在 Aura 组件标记中那样初始化 Lightning Web 组件模板中的列表选项。您必须在 JavaScript 中初始化列表选项。有关示例，请参阅 lightning-dual-listbox 组件。
迁移条件语句
将 Aura 组件中的标签迁移到 、 和 Lightning Web 组件中的标签。<aura:if>lwc:iflwc:elseiflwc:else
下面是 Aura 组件中的语法。
<aura:if isTrue="{!v.something}">
<div>Conditional Code</div>
<aura:set attribute="else">
<div>Conditional Code</div>
</aura:set>
</aura:if>下面是 Lightning Web 组件中的语法。
<template>
<div lwc:if={something}>Conditional Code</div>
<div lwc:elseif={something}>Conditional Code</div>
</template>import { LightningElement } from "lwc";
export default class MyComponentName extends LightningElement {
something = true;
}迁移表达式
将表达式从 Aura 组件中的标记迁移到 Lightning Web 组件中的 JavaScript。
下面是 Aura 组件中的语法。
<aura:if isTrue="{! (!v.something ? v.optionA : v.optionB) }">
<div>Conditional Code</div>
</aura:if>在 Lightning Web 组件中，使用表达式并将其移动到 JavaScript 中。现在代码可以进行单元测试，这是一件非常非常好的事情。下面是 HTML 文件。lwc:if
<template>
<div lwc:if={condition}>Conditional Code</div>
</template>提示
Lightning Web 组件的 HTML 文件中的动态内容在 getter 引用周围没有引号，也没有感叹号或值提供程序 （） 语法。不要使用 Aura 组件中的表达式语法，即使您的手指可能习惯于键入它！v.
下面是 Aura 组件中的表达式。
<aura:if isTrue="{!v.condition}">
下面是 Lightning Web 组件中的类似 HTML。
<div lwc:if={condition}>Conditional Code</div>
下面是 JavaScript 文件。
import { LightningElement } from "lwc";
export default class MyComponentName {
get condition() {
return something ? true : false;
}
}迁移全球价值提供商
将 Aura 组件中的全局值提供程序迁移到 Lightning Web 组件中的作用域模块导入。
| Aura | Lightning Web 组件 | 描述 |
|---|---|---|
$Browser | @salesforce/client/formFactor | 返回有关运行浏览器的硬件的外形规格的信息。 |
$ContentAsset | @salesforce/contentAssetUrl | 引用在 Lightning 组件中用作资产文件的图像、样式表和 JavaScript。 |
$Label | @salesforce/label | 访问存储在代码外部的标签。 |
$Locale | @salesforce/i18n | 返回有关当前用户的首选区域设置的信息。 |
$Resource | @salesforce/resourceUrl | 引用您在静态资源中上传的图像、样式表和 JavaScript 代码。 |
迁移初始值设定项
将 Aura 组件中的事件处理程序替换为 Lightning Web 组件中的标准 JavaScript 方法。initconnectedCallback()
我们在 Aura 组件中使用该事件在组件构造之后但在渲染之前初始化组件。init
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />组件控制器中的函数执行任何必要的初始化。doInit
({
doInit: function (cmp) {
// initialize component
},
});在 Lightning Web 组件中，改用组件的 JavaScript 文件。connectedCallback()
// mySampleInit.js
import { LightningElement } from "lwc";
export default class MySampleInit extends LightningElement {
connectedCallback() {
// initialize component
}
}迁移分面
将 Aura 组件中的分面迁移到 Lightning Web 组件中的插槽。
Aura 组件中的分面是类型为 的属性。例如：Aura.Component[]
<aura:component>
<aura:attribute name="firstName" type="Aura.Component[]" />
<aura:attribute name="lastName" type="Aura.Component[]" />
<p>First Name: {!v.firstName}</p>
<p>Last Name: {!v.lastName}</p>
</aura:component>在 Lightning Web 组件中，我们使用插槽而不是分面。此模板定义了两个命名槽。
<!-- namedSlots.html -->
<template>
<p>First Name: <slot name="firstName">Unknown</slot></p>
<p>Last Name: <slot name="lastName">Unknown</slot></p>
</template>此代码使用组件。<c-namedslots>
<!-- slotsWrapper.html -->
<template>
<c-named-slots>
<span slot="firstName">Willy</span>
<span slot="lastName">Wonka</span>
</c-named-slots>
</template>此 HTML 是呈现的输出。
<p>First Name: <span>Willy</span></p>
<p>Last Name: <span>Wonka</span></p>迁移基本组件
基本 Lightning 组件是 Salesforce 在命名空间中提供的构建块。当您在两种编程模型中使用基本 Lightning 组件时，它们具有不同的语法。lightning
迁移基本组件标记
此 Aura 组件使用基本组件。lightning:formattedText
<aura:component>
<lightning:formattedText linkify="true" value="I like salesforce" />
</aura:component>要将此标记迁移到 Lightning Web 组件：
- 替换为 .
<aura:component></aura:component><template></template> - 将分隔命名空间和组件名称的冒号更改为短划线。
- 验证 Aura 基础 Lightning 组件是否可用作 Lightning Web 组件。请参阅组件库。
- 将驼峰大小写组件名称 （） 更改为以短划线分隔的名称 （）。
formattedTextformatted-text - 删除布尔属性上的 or 值。如果存在，则布尔属性表示其值为 。
truefalsetrue - 将自闭合标记更改为完整结束标记 （）。
</lightning-formatted-text>
下面是等效的 Lightning Web 组件。
<template>
<lightning-formatted-text linkify value="I like salesforce"></lightning-formatted-text>
</template>迁移基本组件事件处理程序
Aura 基础组件上的大多数事件处理程序都具有等效的 Lightning Web 组件。此 Aura 组件使用带有事件处理程序的基本组件。lightning:buttononclick
<aura:component>
<lightning:button
label="Submit"
title="Submit record data"
onclick="{! c.handleClick }" />
</aura:component>若要检索触发事件的按钮上的标签，请使用 .clickevent.getSource()
({
handleClick: function (cmp, event, helper) {
alert("You clicked: " + event.getSource().get("v.label"));
},
});下面是等效的 Lightning Web 组件。
<template>
<lightning-button label="Submit" title="Submit record data" onclick={handleClick}>
</lightning-button>
</template>若要获取对调度事件的组件的引用，请使用该属性，该属性公开了基组件上的公共属性。例如，使用 、 返回单击组件上的标签event.targetlightning-buttonevent.target.label
import { LightningElement } from "lwc";
export default class MigrateButton extends LightningElement {
clickedButtonLabel;
handleClick(event) {
this.clickedButtonLabel = event.target.label;
}
}如果基本 Aura 组件使用 HTML 元素包装，以便您可以侦听组件上的 HTML 事件，请将事件处理程序移动到基本 Lightning Web 组件。例如，支持多个事件处理程序，但不支持 .但是，Aura 使您能够创建包装器来处理事件。lightning:inputonkeydowndivkeydown
<div onkeydown="{!c.handleKeyDown}">
<lightning:input type="search" value="{!v.value}" onchange="{!c.handleChange}" />
</div>下面是等效的 Lightning Web 组件。
<lightning-input
value={val}
label="Enter some text"
onchange={handleChange}
onkeydown={handleKeyDown}
>
</lightning-input>并非 Aura 基本组件中的所有事件处理程序都具有等效的 Lightning Web 组件。有关每个基本组件的规范，请参阅组件库。
迁移注意事项
一些基本的 Lightning Web 组件提供了比 Aura 对应组件更丰富的功能集。某些基本组件可能需要更多更改才能迁移。基本组件：Aura 与 Lightning Web 组件中记录了组件差异。
组件库包括基本组件的示例、文档和规范。在组件的参考页面中，要比较 Lightning Web 组件及其对应的 Aura 组件，请单击“以 Aura 组件形式查看”或“以 Lightning Web 组件形式查看”。
迁移已注册的事件
在 Lightning Web 组件中，Aura 组件标记中的标记没有等效项来注册组件可以触发事件。<aura:registerEvent>
迁移事件处理程序
在 Lightning Web 组件中，没有用于配置事件处理程序的 Aura 组件标记中的标记的等效项。<aura:handler>
迁移访问控制
将 Aura 组件的访问控制迁移到 Lightning Web 组件配置文件中的相应值。将 Aura 组件中属性的访问控制迁移到 JavaScript 属性装饰器和值的适当组合。<isExposed><isExposed>
要管理对 Aura 捆绑包资源（如组件或属性）的访问，请使用 system 属性。例如，此组件具有全局访问权限，这意味着该组件可以添加到托管包中并在另一个组织中使用。如果 Aura 组件实现了适当的接口，则还可以在其他组织的 Lightning 应用程序生成器或 Experience Builder 中使用。access
<aura:component access="global">
...
</aura:component>Lightning Web 组件中的访问控制机制不同，其中访问由 JavaScript 属性装饰器和组件的配置文件定义。
元件
以下是 Aura 组件的访问值如何映射到 Lightning Web 组件。公共
仅在您的组织内可用。
在组件的配置文件中设置。<isExposed>false</isExposed>全球
在所有组织中都可用。该组件可以添加到托管包中，并在另一个组织中使用。Aura 组件还可以在其他组织的 Lightning 应用程序生成器或 Experience Builder 中使用。
在组件的配置文件中设置。<isExposed>true</isExposed>
属性
以下是 Aura 属性的访问值如何映射到 Lightning Web 组件。私人
仅在组件中可用。
使用 JavaScript 字段。公共
仅在您的组织内可用。
在 Lightning Web 组件中执行这两个步骤。
- 将 JavaScript 字段与装饰器一起使用。
@api - 在组件的配置文件中设置。
<isExposed>false</isExposed>
全球
在所有组织中都可用。
在 Lightning Web 组件中执行这两个步骤。
- 将 JavaScript 属性与装饰器一起使用。
@api - 在组件的配置文件中设置。
<isExposed>true</isExposed>
迁移事件
将 Aura 组件中的组件事件迁移到 Lightning Web 组件中的标准 DOM 事件。
以下是在 Lightning Web 组件中处理事件的概述。创建活动
而不是 Aura 组件中的专有对象，而是使用或标准 DOM 对象。在 Lightning Web 组件中，Aura 组件标记中的标记没有等效项来注册组件可以触发事件。EventEventCustomEvent<aura:registerEvent>触发事件
在 Lightning Web 组件中使用 ，而不是在 Aura 组件中使用 ，这是一种标准的 DOM 方法。event.fire()this.dispatchEvent(myEvent)处理事件
Aura 组件使用标记中的标记来定义处理程序。或者，当组件在其标记中引用另一个组件时，它可以声明处理程序操作。此 Aura 组件在其标记中使用，并为触发的 声明一个处理程序。<aura:handler>c:childhandleChildEventsampleComponentEventc:child
<c:child sampleComponentEvent="{!c.handleChildEvent}" />Lightning Web 组件可以类似地声明声明性处理程序。声明性处理程序中的事件名称以 为前缀。on<!– prettier-ignore –>
<c-child onsampleComponentEvent={handleChildEvent}></c-child>事件处理程序函数 在组件的 JavaScript 文件中定义。handleChildEvent
在 Lightning Web 组件中，您还可以使用组件的 JavaScript 文件中的标准方法以编程方式设置处理程序。addEventListener()检索事件负载
除非另有说明，否则使用该属性检索事件有效负载。event.detail
迁移应用程序事件
使用 Lightning 消息服务 （lightning/messageService） 与单个页面或多个页面中的组件进行通信。您还可以使用 pub-sub 模式在单个页面中的组件之间进行通信。
迁移标准Aura事件
此表将标准 Aura 事件（例如用于导航到组件或显示记录创建面板）映射到 Lightning Web 组件中的使用情况。未列出的事件目前在 Lightning Web 组件中没有等效事件。
| Aura 组件 | Lightning Web 组件 | 描述 |
|---|---|---|
aura:locationChange | 当窗口的哈希值更改时，将触发浏览器事件。若要处理此事件，请使用 onhashchange 事件处理程序。hashchange | 在浏览器位置栏中 URL 的哈希部分被修改时触发。 |
aura:valueChange | 将属性与自定义 getter 和 setter 方法结合使用。 | 在属性值更改时触发。 |
aura:valueDestroy | 使用生命周期钩子。请参阅组件生命周期。disconnectedCallback() | 当组件被销毁时触发。 |
aura:valueInit | 若要替换事件处理程序，请使用生命周期挂钩。请参阅迁移初始值设定项。initconnectedCallback() | 在组件初始化时触发。 |
aura:valueRender | 使用 或 lifecycle 挂钩。请参阅组件生命周期。renderedCallback()render() | 在渲染组件时触发。 |
force:createRecord | 使用导航服务。 | 显示记录创建面板。 |
force:editRecord | 使用导航服务。 | 显示记录编辑面板。 |
force:navigateHome（已弃用） | 使用导航服务。 | 导航到记录主页。 |
force:navigateToComponent（已弃用） | 使用导航服务。 | 导航到组件。 |
force:navigateToList | 使用导航服务。 | 导航到列表视图。 |
force:navigateToObjectHome | 使用导航服务。 | 导航到对象主页。 |
force:navigateToRelatedList | 使用导航服务。 | 导航到相关列表。 |
force:navigateToSObject | 使用导航服务。 | 导航到记录。 |
force:navigateToURL | 使用导航服务。 | 导航到 URL。 |
force:refreshView | 要刷新通过线路服务预配的 Apex 数据，请调用 refreshApex（）。如果您的代码强制调用 Apex 方法，请通过再次调用该方法来刷新数据，然后调用 notifyRecordUpdateAvailable（recordIds） 以更新 Lightning 数据服务 （LDS） 缓存。仅当您希望在 LDS 缓存中更新任何相关数据时，才需要调用。向 LDS 发出某些记录已过时的信号，并刷新 LDS 缓存中的那些记录。notifyRecordUpdateAvailable()notifyRecordUpdateAvailable() | 在不重新加载页面的情况下重新加载视图。 |
force:showToast | 导入模块。请参阅 Toast 通知lightning/platformShowToastEvent | 显示 Toast 消息，以提醒用户成功、错误或警告。 |
lightning:openFiles | 使用导航服务。请参阅打开文件。 | 打开一条或多条文件记录。 |
lightning:tabClosed | 计划在将来发布。 | 在成功关闭控制台工作区或子选项卡时触发。 |
lightning:tabCreated | 计划在将来发布。 | 在成功创建控制台工作区或子选项卡时触发。 |
lightning:tabFocused | 计划在将来发布。 | 当控制台工作区或子选项卡处于焦点状态时触发。 |
lightning:tabRefreshed | 计划在将来发布。 | 在成功刷新控制台工作区或子选项卡时触发。 |
lightning:tabReplaced | 计划在将来发布。 | 在成功替换控制台主选项卡或子选项卡时触发。 |
lightning:tabUpdated | 计划在将来发布。 | 在控制台工作区或子选项卡更新（包括标签、图标或其他内容更改）时触发。 |
ltng:afterScriptsLoaded | 从模块导入静态资源和导入方法。请参阅使用第三方 JavaScript 库。lightning/platformResourceLoader | 在加载了ltng:requireltng:require.scripts |
注意
我们的前瞻性声明适用于计划在未来版本中的功能支持。由于路线图项目可能随时更改，因此请根据当前可用的技术做出购买决策。
迁移接口
通过实施 Aura 接口，您可以接收上下文数据或在不同的上下文中显示自定义组件，例如在 Lightning 应用程序生成器或体验生成器中。
要在 Lightning Web 组件中接收上下文数据，请导入相应的模块。若要在不同的上下文中显示组件，请使用配置文件中的元数据。targets*.js-meta.xml
未列出的 Aura 接口目前在 Lightning Web 组件中没有等效接口。
客户端：availableForMailAppPage
在：*.js-meta.xml
<targets>
<target>lightning__Inbox</target>
</targets>指示该组件可在 Lightning 应用程序构建器中用于添加到 Outlook 和 Gmail 集成的电子邮件应用程序窗格中。 请参阅为 Outlook 和 Gmail 集成创建组件。
客户端：hasEventContext
import { LightningElement, api } from 'lwc';
@api dates;
@api location;在：*.js-meta.xml
<targets>
<target>lightning__Inbox</target>
</targets>指示组件在与 Outlook 和 Gmail 集成一起使用时获取有关事件的上下文信息。请参阅为 Outlook 和 Gmail 集成创建组件。
客户端：hasItemContext
import { LightningElement, api } from 'lwc';
@api mode;
@api people;
@api source;
@api subject;
@api messageBody;在*.js-meta.xml:
<targets>
<target>lightning__Inbox</target>
</targets>指示组件在与 Outlook 和 Gmail 集成一起使用时获取有关电子邮件或日历事件的上下文信息。请参阅为 Outlook 和 Gmail 集成创建组件。
flexipage：availableForAllPageTypes
在*.js-meta.xml:
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__UtilityBar</target>
</targets>指示该组件可用于记录页、实用工具栏和任何其他类型的页。将每个页面类型显式指定为目标。请参阅为 Lightning 应用程序生成器配置组件和为实用程序栏配置组件。
flexipage：availableForRecord首页
<targets>
<target>lightning__RecordPage</target>
</targets>指示该组件仅适用于记录页。
force：hasRecordId
import { LightningElement, api } from 'lwc';
@api recordId;在*.js-meta.xml:
<targets>
<target>lightning__RecordPage</target>
</targets>指示组件采用记录 ID 作为属性。请参阅使组件了解其记录上下文。
force：hasSObjectName
import { LightningElement, api } from 'lwc';
@api objectApiName;在*.js-meta.xml:
<targets>
<target>lightning__RecordPage</target>
</targets>指示组件采用当前记录的对象类型的 API 名称。请参阅使组件了解其对象上下文。
力：闪电快速动作
在*.js-meta.xml:
<targets>
<target>lightning__RecordAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>指示组件是快速操作。请参阅配置组件以执行快速操作。
注意
LWC 快速操作目前仅在记录页面上受支持。
force：lightningQuickActionWithoutHeader
在*.js-meta.xml:
<targets>
<target>lightning__RecordAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>指示组件是没有标头的快速操作。请参阅配置组件以执行快速操作。
注意
LWC 快速操作目前仅在记录页面上受支持。
forceCommunity：availableForAllPageTypes
在*.js-meta.xml:
<targets>
<target>lightningCommunity__Page</target>
</targets>指示该组件可在Experience Builder中使用。请参阅为 Experience Builder 配置组件。
lightning：hasPageReference
import { CurrentPageReference } from 'lightning/navigation';
@wire(CurrentPageReference) pageRef;指示组件接受 PageReference。请参阅导航到页面、记录和列表。
迁移 CSS
Lightning Web 组件使用标准的 CSS 语法。删除 Aura 组件使用的专有类。THIS
下面是 Aura 组件的 CSS 文件。
.THIS .red {
background-color: red;
}
.THIS .blue {
background-color: blue;
}
.THIS .green {
background-color: green;
}删除 THIS 关键字
迁移的 Lightning Web 组件的 CSS 文件是相同的，只是删除了 .THIS
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}迁移基本 Lightning 组件的 CSS
目前，并非所有基本组件都支持迁移 CSS 文件。假设您正在迁移以下 Aura 标记。lightning:button
<lightning:button label="Reset" class="buttonColor buttonText"/>使用以下 CSS 选择器。lightning:button
.THIS .buttonColor {
background-color: red;
}
.THIS .buttonText {
color: lightgray;
}当您使用 Lightning Web 组件时，自定义类将应用于组件的外部元素，这意味着以下标记不会显示预期的样式。lightning-buttonlightning-buttonlightning-button
<!-- Custom styling does not work here -->
<lightning-button label="Reset" class="buttonColor buttonText"></lightning-button>注意
您的自定义 CSS 会自动将范围限定为您自己的组件，以防止基本组件内部的样式化。我们建议您尽可能使用 Lightning Design System 类或基本 Lightning 组件上的变体。
在这种情况下，我们建议您使用 上的 variant 属性。例如，使用变体将背景颜色设置为红色。lightning-buttondestructive
<lightning-button label="Reset" variant="destructive"></lightning-button>让我们看一下另一个示例，其中迁移 CSS 可以适用于基本组件。例如，您有以下标记。lightning:formattedAddress
<div class="mailingAddress">
<lightning:formattedAddress
street="1 Market St."
city="San Francisco"
country="US"
province="CA"
postalCode="94105"
/>
</div>该组件使用以下 CSS 选择器。
.THIS .mailingAddress a {
color: red;
}使用该属性应用自定义样式。class
<!-- Custom styling works here -->
<lightning-formatted-address
class="mailingAddress"
street="121 Spear St."
city="San Francisco"
country="US"
province="CA"
postal-code="94105"
></lightning-formatted-address>.mailingAddress {
color: red;
}迁移 JavaScript
将 JavaScript 代码从客户端控制器、帮助程序和渲染器移动到 Lightning Web 组件中的单个 JavaScript 文件。
Aura 组件中的客户端控制器是采用对象文字表示法的 JavaScript 对象，其中包含名称/值对的映射。Lightning Web 组件中的 JavaScript 文件是 ES6 模块，因此您使用的是标准 JavaScript，而不是 Aura 组件中使用的专有格式。
这不是逐行转换，而是重新审视组件设计的好机会。
要在 Lightning Web 组件和 Aura 组件之间共享 JavaScript 代码，请将代码放在 ES6 模块中。有关更多信息，请参阅在 LWC 和 Aura 之间共享 JavaScript 代码。
迁移 Apex
Aura 组件和 Lightning Web 组件都使用 Apex 控制器来读取或保存 Salesforce 数据。这两种编程模型没有语法差异。
Lightning Web 组件还可以使用 JavaScript 装饰器来包装对 Apex 方法或用户界面 API 的调用。@wire
数据绑定行为与 Aura 的差异
在标记中添加组件时，可以根据所有者组件的属性值初始化组件中的公共属性值。在 Lightning Web 组件中，属性值的数据绑定是单向的。Lightning Web 组件和 Aura 开发模型的数据绑定行为是不同的。
Aura
Aura 有两种形式的数据绑定表达式语法。
下面总结了表达式语法形式之间的差异。{#expression}（未绑定表达式）
数据更新的行为与您在 JavaScript 中的预期一样。基元（如 ）按值传递，父项和子项中表达式的数据更新是分离的。String
对象（如 或 ）通过引用传递，因此对子项中数据的更改将传播到父项。但是，父级中的更改处理程序不会收到通知。相同的行为也适用于传播到子项的父项中的更改。ArrayMap{!expression}（绑定表达式）
任一组件中的数据更新都通过两个组件中的双向数据绑定进行反映。同样，更改处理程序在父组件和子组件中都会触发。
Lightning Web 组件
属性值的组件之间的数据绑定是单向的。
若要从父组件向下通信到子组件，请在子组件上设置属性或调用方法。
若要从子组件向上通信到父组件，请发送事件。
有关更多信息，请参见设置子组件的属性。
基本组件：Aura 与 Lightning Web 组件
许多基本的 Lightning Web 组件具有与 Aura 对应组件相同的功能和属性。有些有细微的差异。
Lightning Web 组件继承了全局 HTML 属性和事件，使其比 Aura 组件更具功能性和性能。组件引用未列出每个组件的全局 HTML 属性和事件。参见 MDN 上的全局属性和事件。
对于组件样式，基本 Aura 组件和 Lightning Web 组件都支持设计变体和 SLDS 实用程序类。基本 Aura 组件还支持使用您自己的类进行自定义样式设置。但是，Lightning Web 组件遵循影子 DOM 标准，这阻止了使用您自己的类进行自定义样式。某些基本 LWC 组件支持用于自定义样式的 SLDS 样式挂钩。请参阅使用 Lightning Design System 样式挂钩设置组件样式。
下表列出了 Aura 基本组件与其 Lightning Web 组件对应组件之间的使用差异。Aura组件遵循名称格式，使用冒号分隔命名空间和组件名称。Lightning Web 组件遵循名称格式，用破折号分隔命名空间和组件名称。namespace:componentNamenamespace-component-name
表 1.Aura 组件到 Lightning Web 组件的映射
| Namespace | Aura 组件 | Lightning Web 组件 | 差异 |
|---|---|---|---|
lightning | accordion | accordion | lightning:accordion支持在简单标记中初始化多个打开的部分。要使用多个打开的部分进行初始化，请使用 JavaScript 传递部分名称数组。lightning-accordion |
lightning | accordionSection | accordion-section | lightning:accordionSection通过传入组件的 actions 属性支持自定义菜单。当您将鼠标悬停在折叠式部分上时，Aura 组件的属性会提供工具提示文本。 支持通过插槽执行自定义菜单操作。Lightning Web 组件中的属性目前保留供内部使用。actionslightning:buttonMenutitlelightning-accordion-sectionactionslightning-button-menutitle |
lightning | avatar | avatar | – |
lightning | badge | badge | – |
lightning | breadcrumb | breadcrumb | – |
lightning | breadcrumbs | breadcrumbs | – |
lightning | button | button | – |
lightning | buttonGroup | button-group | – |
lightning | buttonIcon | button-icon | lightning-button-icon不支持 .iconClass |
lightning | buttonIconStateful | button-icon-stateful | – |
lightning | buttonMenu | button-menu | lightning:buttonMenu不支持 AND 事件处理程序。onclickonclose |
lightning | buttonStateful | button-stateful | 在 中，使用属性在选择按钮时显示。在 中，使用属性。lightning:buttonStatefulstatelightning-button-statefulselected |
lightning | card | card | 在 中，可以将 和 属性设置为字符串或对象，这样就可以传递组件。您可以使用该属性指定要在卡片标题中显示的 或。在 中，可以将 和 属性设置为仅文本。若要包含标记或其他组件，请使用命名槽。您只能在命名槽中指定操作。lightning:cardtitlefooteractionslightning:buttonlightning:buttonIconlightning-cardtitlefooteraction |
lightning | carousel | carousel | – |
lightning | checkboxGroup | checkbox-group | – |
lightning | clickToDial | click-to-dial | – |
lightning | combobox | combobox | – |
lightning | container | – | Lightning Web 组件尚不可用。 |
lightning | datatable | datatable | lightning:datatable不支持表格单元格中的自定义数据类型。 仅支持自定义 CSS 类，用于设置标准数据类型列的样式。 支持表格单元格中的自定义数据类型。 支持自定义 CSS 类，仅用于设置自定义数据类型的列样式。lightning:datatablelightning-datatablelightning-datatable |
lightning | dualListbox | dual-listbox | – |
lightning | dynamicIcon | dynamic-icon | – |
lightning | fileCard | – | Lightning Web 组件尚不可用。 |
lightning | fileUpload | file-upload | – |
lightning | flexipageRegionInfo | – | 在 Aura 中，用于使包含组件知道它可以占用的宽度。在 Lightning Web 组件中，将公共属性用于此目的。请参阅使组件具有宽度感知能力。flexipageRegionInfoflexipageRegionWidth |
lightning | flow | flow | 请参阅在自定义 LWC 中创建和启动流。 |
lightning | formattedAddress | formatted-address | – |
lightning | formattedDateTime | formatted-date-time | 在 中，使用 true 或 false 字符串或变量设置属性。在 中，只能使用变量设置属性。字符串始终被解释为 true。lightning:formattedDateTimehour12lightning-formatted-numberhour12 |
lightning | formattedEmail | formatted-email | – |
lightning | formattedLocation | formatted-location | – |
lightning | formattedName | formatted-name | – |
lightning | formattedNumber | formatted-number | 在 中，使用属性指定要显示的数字类型。在 中，将属性用于此目的。lightning:formattedNumberstylelightning-formatted-numberformat-style |
lightning | formattedPhone | formatted-phone | – |
lightning | formattedRichText | formatted-rich-text | – |
lightning | formattedText | formatted-text | – |
lightning | formattedTime | formatted-time | – |
lightning | formattedUrl | formatted-url | – |
lightning | helptext | helptext | – |
lightning | icon | icon | – |
lightning | input | input | – |
lightning | inputAddress | input-address | – |
lightning | inputField | input-field | lightning:inputField不提供指示字段已修改但未保存的方法。 支持一个属性，以指示该字段已被用户修改，但未保存或提交。有关详细信息，请参阅差异。 支持该属性，但同时支持 和 。lightning-input-fielddirtyrecordEditFormlightning:inputFieldreadonlylightning-input-fieldreadonlyread-only |
lightning | inputLocation | input-location | – |
lightning | inputName | input-name | – |
lightning | inputRichText | input-rich-text | lightning:inputRichText要求您使用子组件添加“插入图像”按钮。它不支持插入链接按钮或自定义按钮。 提供用于插入图像和链接的按钮。 支持使用组件和 （Beta） 添加自定义按钮。lightning:insertImageButtonlightning-input-rich-textlightning-input-rich-textlightning-rich-text-toolbar-button-grouplightning-rich-text-toolbar-button |
lightning | insertImageButton | – | 支持插入图像按钮，因此您不需要 .lightning-input-rich-textlightning:insertImageButton |
lightning | layout | layout | lightning:layout允许组件之间的 HTML 标记、文本、表达式和其他组件。 不允许在组件之间使用表达式或其他组件。但是，您可以在组件之间放置 HTML 标记和文本。lightning:layoutItemlightning-layoutlightning-layout-itemlightning-layout-item |
lightning | layoutItem | layout-item | 请参阅的差异。lightning-layout |
lightning | listView | – | Lightning Web 组件尚不可用。 |
lightning | map | map | – |
lightning | menuItem | menu-item | – |
lightning | navigation | navigation模块 | 在 Aura 组件中，使用该组件访问导航服务。在 Lightning Web 组件中，在组件的 JavaScript 中导入模块。请参阅导航到页面、记录和列表。lightning:navigationlightning/navigation |
lightning | notificationsLibrary | platformShowToastEvent模块 | 在 Aura 组件中，添加组件以创建通知和 Toast。库提供 和 事件。在 Lightning Web 组件中，将模块导入组件的 JavaScript 中。该模块提供了一个名为 的事件。LWC 尚不支持通知。 支持与 Aura 相同的参数、模式和变体。请参阅 Toast 通知。notificationsLibraryshowToastshowNoticelightning/platformShowToastEventShowToastEventShowToastEventshowToast |
lightning | outputField | output-field | 查看差异。recordViewForm |
lightning | overlayLibrary | – | 在 Aura 组件中，添加组件以创建模式对话框和弹出框。该库提供 、 和方法。overlayLibraryshowCustomModal()showCustomPopover()notifyClose() |
lightning | path | – | Lightning Web 组件尚不可用。 |
lightning | picklistPath | – | Lightning Web 组件尚不可用。 |
lightning | pill | pill | lightning:pill要求属性包含头像或图标。该属性在 上不可用。 可以接受头像和图标作为嵌套组件。mediavariantlightning:pilllightning-pill |
lightning | pillContainer | pill-container | – |
lightning | progressBar | progress-bar | – |
lightning | progressIndicator | progress-indicator | – |
lightning | progressRing | progress-ring | – |
lightning | quipCard | – | Lightning Web 组件尚不可用。 |
lightning | radioGroup | radio-group | – |
lightning | recordEditForm | record-edit-form | lightning:recordEditForm不需要直接将组件嵌套在其中。您可以将组件嵌套在 HTML 标记或其他组件中，例如定制布局。 旨在用作 的子项。您可以嵌套在 HTML 标记或其他基本组件中，例如 within 中。但是，不能嵌套在自定义组件中。lightning:inputFieldlightning:inputFieldlightning:layoutlightning-input-fieldlightning-record-edit-formlightning-input-fieldlightning-layoutlightning-record-edit-formlightning-input-field |
lightning | recordForm | record-form | – |
lightning | recordViewForm | record-view-form | lightning:recordViewForm不需要您直接将组件嵌套在其中，尽管这是预期的用法。 必须是 的子项。不要嵌套在另一个元素中，例如 .您可以将其放置在容器中，例如 within 中。lightning:outputFieldlightning-output-fieldlightning-record-view-formlightning-output-fieldlightning-layoutlightning-record-view-form |
lightning | relativeDateTime | relative-date-time | – |
lightning | select | – | Lightning Web 组件尚不可用。在移动环境中，使用本机元素。在桌面环境中，请考虑使用 Lightning Web 组件。要支持多选，请使用 .<select>lightning-comboboxlightning-dual-listbox |
lightning | slider | slider | – |
lightning | spinner | spinner | – |
lightning | tab | tab | 在 中，使用该属性分配一个字符串来标识选项卡。在 中，使用属性分配选项卡标识符。使用这些字符串来确定单击了哪个选项卡。lightning:tabidlightning-tabvaluetabset |
lightning | tabset | tabset | lightning:tabset使用该属性指定打开的选项卡。 使用 .selectedTabIdlightning-tabsetactive-tab-value attribute |
lightning | textarea | textarea | – |
lightning | tile | tile | 在 中，可用于添加包含头像组件或图标组件的属性。在 中，指定具有命名槽的头像和图标组件。lightning:tile<aura:set\>medialightning-tilemedia |
lightning | tree | tree | – |
lightning | treeGrid | tree-grid | – |
lightning | unsavedChanges | – | Lightning Web 组件尚不可用。 |
lightning | verticalNavigation | vertical-navigation | – |
lightning | verticalNavigationItem | vertical-navigation-item | – |
lightning | verticalNavigationItemBadge | vertical-navigation-item-badge | – |
lightning | verticalNavigationItemIcon | vertical-navigation-item-icon | – |
lightning | verticalNavigationItemOverflow | vertical-navigation-item-overflow | – |
lightning | verticalNavigationSection | vertical-navigation-section | – |
aura | expression | 自定义 JavaScript | 请参阅迁移表达式。 |
aura | html | – | 不适用 |
aura | if | lwc:if / lwc:elseif / lwc:else | 请参阅迁移条件。 |
aura | iteration | for:each | 请参阅迁移迭代。 |
aura | renderIf | lwc:if / lwc:elseif / lwc:else | 请参阅迁移条件。 |
aura | template | – | 不适用 |
aura | text | – | 不适用 |
aura | token | – | 不适用 |
aura | unescapedHTML | – | 不适用 |
force | canvasApp | – | 不适用 |
force | inputField | input-field | force:inputField已被 in Aura 取代。要根据字段类型创建可编辑字段，请使用 Lightning Web 组件或其对应的 Lightning Web 组件。lightning:inputFieldlightning:inputFieldlightning:recordEditForm |
force | outputField | output-field | force:outputField已被 in Aura 取代。要根据字段类型创建只读字段，请使用 或其对应的 Lightning Web 组件。lightning:outputFieldlightning:outputFieldlightning:recordViewForm |
force | recordData | @wire | 请参阅了解 Wire Service。 |
force | recordEdit | record-edit-form | force:recordEdit已替换为 。lightning:recordEditForm |
force | recordView | record-view-form | force:recordView已替换为 。lightning:recordViewForm |
ltng | require | platformResourceLoader模块 | 在 Aura 组件中，将标记添加到组件标记以引用外部静态资源。在 Lightning Web 组件中，将模块导入组件的 JavaScript 中。请参阅使用第三方 JavaScript 库。<ltng:require>lightning/platformResourceLoader |
记录主页的 LWC 迁移
作为 Salesforce LWC 支持计划的一部分，标准对象的大多数记录主页都已转换为 LWC，包括详细信息、突出显示和相关列表。
将记录主页转换为使用 LWC 可加快页面加载和呈现速度，这在用于创建、编辑或查看记录的大型页面布局中尤其明显。
记录主页具有此 URL 模式。
https://my-domain-name.my.salesforce.com/lightning/r/ObjectApiName/RecordId/ViewOrEdit例如，您可以像这样查看帐户的记录主页。
https://my-dev-org.my.salesforce.com/lightning/r/Account/xxxxxxxxxxxxxxxQAD/view