分类： 适用于Aura开发人员的Lightning Web Components

让我们从一个简单的示例开始，然后定义一些我们用于组成组件的术语。讨论似乎是不必要的转移，但与其他开发人员交谈时保持一致的术语很重要。

<!-- owner.html -->
<template>
    <c-child first-name="Moonbeam"></c-child>
<template>

该HTML文件使用 <c-child>，指的是 儿童 组件中的 C命名空间。如果尚未为组织设置名称空间前缀，请使用默认名称空间C 引用您创建的组件时。

所有者

所有者是拥有模板的组件。在此示例中，所有者是c所有者组件。所有者控制它包含的所有组成组件。所有者可以：

• 在组成的组件上设置公共属性。
• 在组成的组件上调用公共方法。
• 侦听由组成组件触发的任何事件。

父母与子女

当一个组件包含另一个组件（该组件又可以包含其他组件）时，我们具有一个包含层次结构。在文档中，有时我们讨论父组件和子组件。父组件包含子组件。父组件可以是所有者，也可以是所有者模板的一部分的容器组件。

在这个例子中 c-父容器 是容器组件，因为它包含 小孩。的c-父容器 组件不是所有者，因为它位于所有者组件的模板中， 业主。

<!-- owner.html -->
<template>
    <c-parent-container>
        <c-child first-name="Moonbeam"></c-child>
    </c-parent-container>
<template>

让我们看一个组成组件的例子。的PropertyTileList 光环组件包含 PropertyTile 零件。

<aura:component>
    ...
    <div class="slds-card">
        <lightning:layout horizontalAlign="center" multipleRows="true">
            <aura:iteration items="{!v.properties}" var="property">
                <lightning:layoutItem padding="around-small" size="12" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
                    <c:PropertyTile property="{#property}"/>
                </lightning:layoutItem>    
            </aura:iteration>
        </lightning:layout>
    </div>
    
</aura:component>

的 PropertyTile 组件具有称为的属性 属性。不要被那个名字分散注意力。DreamHouse是一个房地产应用程序，因此我们在这里谈论房地产属性而不是JavaScript属性！

这是HTML的 propertyTileList 闪电网络组件：

<template>
    <div class="slds-card tile-list">
        <template for:each={filteredProperties} for:item="property">
            <c-property-tile property={property} key={property.Id}></c-property-tile>
        </template>
    </div>
</template>

对于这两种编程模型，标记看起来相似，除了用于引用组成的组件的语法外。前面我们看到了Aura模型和Lightning Web组件模型如何分别具有不同的语法来引用标记中的组件。

• 在Aura组件中，我们使用 c：PropertyTile。
• 在Lightning Web组件中，我们使用 房地产。破折号分隔了命名空间，C，来自组件名称。骆驼案propertyTile 闪电Web组件被称为 物业平铺 在包含它的另一个Lightning Web组件的HTML文件中。

<!-- lwcContainerComponent.html -->
<template>
    <c-lwc-component></c-lwc-component>
</template>

<!-- auraWrapper.cmp -->
<aura:component>
    <c:lwcContainerComponent />
</aura:component>

在Aura中，构面是任何类型的属性Aura.Component []。这只是您可以为属性设置一组组件的一种奇特的方式。用更不用说的话，可以将构面视为三明治。您可以根据需要将尽可能多的配料（成分）填充到三明治（构面）中。

例如，每个Aura组件都继承了一个 身体 属性，这是一个方面。构面的概念很重要，因为它使您可以设计具有属性的组件，该属性是父组件可以设置的标记的占位符。

闪电Web组件使用插槽代替刻面。插槽是Web组件规范的一部分。

这是一个Aura组件的示例，其中包含一个 标头 方面和 身体 默认情况下，每个组件都有。

<aura:component>
    <aura:attribute name="header" type="Aura.Component[]"/>
    <div>
        <span>{!v.header}</span><br/>
        <span>{!v.body}</span>
    </div>
</aura:component>

类似的Lightning Web组件如下所示。

<template>
    <div>
        <slot name="header"></slot><br/>
        <slot></slot>
    </div>
</template>

插槽名为 标头 取代 标头方面。未命名的插槽取代了身体 方面。

您可以在《Lightning Web Components开发人员指南》中深入了解。

在标记中添加组件时，可以根据所有者组件的属性值在子组件中初始化公共属性值。两种编程模型的数据绑定行为是不同的。

<!-- owner.cmp -->
<aura:component>
    <aura:attribute name="fName" type="String" />
    <c:child firstName="{!v.fName}"/>
</aura:component>

<!-- owner.html -->
<template>
    <c-child first-name={fName}></child>
</template>

让我们从一个简单的示例开始，然后定义一些我们用于组成组件的术语。讨论似乎是不必要的转移，但与其他开发人员交谈时保持一致的术语很重要。

<!-- owner.html -->
<template>
    <c-child first-name="Moonbeam"></c-child>
<template>

该HTML文件使用 <c-child>，指的是 儿童 组件中的 C命名空间。如果尚未为组织设置名称空间前缀，请使用默认名称空间C 引用您创建的组件时。

所有者

所有者是拥有模板的组件。在此示例中，所有者是c所有者组件。所有者控制它包含的所有组成组件。所有者可以：

• 在组成的组件上设置公共属性。
• 在组成的组件上调用公共方法。
• 侦听由组成组件触发的任何事件。

父母与子女

当一个组件包含另一个组件（该组件又可以包含其他组件）时，我们具有一个包含层次结构。在文档中，有时我们讨论父组件和子组件。父组件包含子组件。父组件可以是所有者，也可以是所有者模板的一部分的容器组件。

在这个例子中 c-父容器 是容器组件，因为它包含 小孩。的c-父容器 组件不是所有者，因为它位于所有者组件的模板中， 业主。

<!-- owner.html -->
<template>
    <c-parent-container>
        <c-child first-name="Moonbeam"></c-child>
    </c-parent-container>
<template>

让我们看一个组成组件的例子。的PropertyTileList 光环组件包含 PropertyTile 零件。

<aura:component>
    ...
    <div class="slds-card">
        <lightning:layout horizontalAlign="center" multipleRows="true">
            <aura:iteration items="{!v.properties}" var="property">
                <lightning:layoutItem padding="around-small" size="12" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
                    <c:PropertyTile property="{#property}"/>
                </lightning:layoutItem>    
            </aura:iteration>
        </lightning:layout>
    </div>
    
</aura:component>

的 PropertyTile 组件具有称为的属性 属性。不要被那个名字分散注意力。DreamHouse是一个房地产应用程序，因此我们在这里谈论房地产属性而不是JavaScript属性！

这是HTML的 propertyTileList 闪电网络组件：

<template>
    <div class="slds-card tile-list">
        <template for:each={filteredProperties} for:item="property">
            <c-property-tile property={property} key={property.Id}></c-property-tile>
        </template>
    </div>
</template>

对于这两种编程模型，标记看起来相似，除了用于引用组成的组件的语法外。前面我们看到了Aura模型和Lightning Web组件模型如何分别具有不同的语法来引用标记中的组件。

• 在Aura组件中，我们使用 c：PropertyTile。
• 在Lightning Web组件中，我们使用 房地产。破折号分隔了命名空间，C，来自组件名称。骆驼案propertyTile 闪电Web组件被称为 物业平铺 在包含它的另一个Lightning Web组件的HTML文件中。

<!-- lwcContainerComponent.html -->
<template>
    <c-lwc-component></c-lwc-component>
</template>

<!-- auraWrapper.cmp -->
<aura:component>
    <c:lwcContainerComponent />
</aura:component>

在Aura中，构面是任何类型的属性Aura.Component []。这只是您可以为属性设置一组组件的一种奇特的方式。用更不用说的话，可以将构面视为三明治。您可以根据需要将尽可能多的配料（成分）填充到三明治（构面）中。

例如，每个Aura组件都继承了一个 身体 属性，这是一个方面。构面的概念很重要，因为它使您可以设计具有属性的组件，该属性是父组件可以设置的标记的占位符。

闪电Web组件使用插槽代替刻面。插槽是Web组件规范的一部分。

这是一个Aura组件的示例，其中包含一个 标头 方面和 身体 默认情况下，每个组件都有。

<aura:component>
    <aura:attribute name="header" type="Aura.Component[]"/>
    <div>
        <span>{!v.header}</span><br/>
        <span>{!v.body}</span>
    </div>
</aura:component>

类似的Lightning Web组件如下所示。

<template>
    <div>
        <slot name="header"></slot><br/>
        <slot></slot>
    </div>
</template>

插槽名为 标头 取代 标头方面。未命名的插槽取代了身体 方面。

您可以在《Lightning Web Components开发人员指南》中深入了解。

在标记中添加组件时，可以根据所有者组件的属性值在子组件中初始化公共属性值。两种编程模型的数据绑定行为是不同的。

<!-- owner.cmp -->
<aura:component>
    <aura:attribute name="fName" type="String" />
    <c:child firstName="{!v.fName}"/>
</aura:component>

<!-- owner.html -->
<template>
    <c-child first-name={fName}></child>
</template>

要创建允许用户查看，编辑和创建Salesforce记录的表单，Aura组件和Lightning Web组件都可以在 闪电 命名空间。

这些组件提供表单布局并处理记录的CRUD更改，而无需Apex代码。他们使用Lightning Data Service在各个组件之间缓存和共享记录更新。

Lightning Data Service构建在公共用户界面API之上，但仅支持API的子集。该子集涵盖了许多处理数据的典型用例。

这些组件的行为相同，但是具有命名约定的区别，这与我们之前在Aura组件和Lightning Web组件中看到的一样。

在大多数情况下， 闪电记录形式提供了一个很好的起点。它结合并简化了功能闪电记录视图形式 和 闪电记录编辑表。

对于需要自定义字段布局和自定义呈现记录数据的更高级用例，请使用 闪电记录视图形式 和 闪电记录编辑表。

这是一个例子 经纪人详细信息 灵气成分。

<lightning:recordForm
  objectApiName="Broker__c"
  recordId="{!v.property.Broker__c}"
  fields="{!v.brokerFields}"
  columns="2"/>

这是等效的HTML brokerCard 闪电网络组件。

<lightning-record-form
  object-api-name="Broker__c" 
  record-id={brokerId}
  fields={brokerFields} 
  columns="2">
</lightning-record-form>

需要对UI进行更多控制的Aura组件 闪电：记录形式 和朋友提供可以使用 <force：recordData> 在标记中使用自己的自定义UI标记代码。

的 物业摘要 光环组件用途 <force：recordData> 在其标记中。

<force:recordData aura:id="service"
      recordId="{!v.recordId}"
      targetFields="{!v.property}"
      fields="['Id',
              'Thumbnail__c',
              'Address__c',
              'City__c',
              'State__c',
              'Zip__c',
              'Price__c',
              'Beds__c',
              'Baths__c',
              'Broker__r.Id',
              'Broker__r.Name',
              'Broker__r.Title__c',
              'Broker__r.Mobile_Phone__c',
              'Broker__r.Email__c',
              'Broker__r.Picture__c']" />

代替 <force：recordData>，Lightning Web组件有几种使用Lightning Data Service的技术，但是根据您是读取还是写入数据而有所不同。仅在以下情况下才考虑使用Wire Service和JavaScript API方法： 闪电记录*形式 组件不符合您的要求。

我们已经研究了一些使用Lightning Data Service处理数据的技术。这些技术通常意味着更少的代码，因为您不需要任何Apex。但是，如果您已经具有为Aura组件开发的Apex代码，则可以在Lightning Web组件中重复使用它。或者，如果需要SOQL查询来进行自定义数据访问，则必须使用Apex方法。

要从Aura组件访问Apex控制器，请从JavaScript控制器或帮助器进行调用。这是物业轮播 光环组件调用 getPictures（） Apex方法。

({
    loadPictures : function(component) {
        var propertyId = component.get("v.recordId");
        component.set("v.files", []);
        if (!propertyId) {
            return;
        }
        var action = component.get("c.getPictures");
        action.setParams({
            "propertyId": propertyId,
        });
        action.setCallback(this, function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var files = response.getReturnValue();
                component.set("v.files", files);
            }
            else if (state === "INCOMPLETE") {
                // handle incomplete state
            }
            else if (state === "ERROR") {
                // handle error state
            }
        });
        $A.enqueueAction(action);
    }
})

任何访问Salesforce数据的Aura组件都具有类似的样板。对于Lightning Web组件，访问Apex方法的语法不同。

闪电Web组件可以从Apex类导入方法。导入的方法是组件可以通过声明方式调用的函数@线 或直接在代码中。

在Lightning Web组件中使用外部API类似于Aura组件。默认情况下，您无法从Lightning Web组件中的JavaScript代码调用第三方API。将远程站点添加为CSP受信任站点，以允许JavaScript组件代码从该站点的域加载资产并向该域的域发出API请求。

Aura组件和Lightning Web组件在运行来自第三方站点的JavaScript代码方面具有相同的限制。要使用第三方库，您必须将库作为静态资源上载。

JavaScript是Lightning Web组件的心脏。没有JavaScript，组件就是毫无生气的主要是HTML。当我们看到Aura组件中的属性如何映射到JavaScript属性时，我们可以窥见上一个单元中的Lightning Web组件中的JavaScript文件。现在，我们更深入地研究JavaScript文件。

将JavaScript代码从Aura组件中单独的客户端控制器，帮助程序和渲染器文件迁移到Lightning Web组件中的一个JavaScript文件。

Aura组件中的客户端控制器是对象文字表示形式的JavaScript对象，其中包含名称-值对的映射。好多话。让我们看一下PropertyPaginatorController.js文件中的示例：

({
	previousPage : function(component) {
        var pageChangeEvent = component.getEvent("pagePrevious");
        pageChangeEvent.fire();
	},
    
	nextPage : function(component) {
        var pageChangeEvent = component.getEvent("pageNext");
        pageChangeEvent.fire();
	}
})

Aura组件中JavaScript文件的格式是在将ES6标准（例如JavaScript类和模块）用于功能标准化之前设计的。

Lightning Web组件中的JavaScript文件是ES6模块，因此您使用的是标准JavaScript，而不是Aura组件中使用的专有格式。您编写的JavaScript看起来与您为其他任何现代JavaScript框架编写的JavaScript相似。

这是类似的JavaScript 分页器 闪电网络组件。

import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
    /** The current page number. */
    @api pageNumber;
    /** The number of items on a page. */
    @api pageSize;
    /** The total number of items in the list. */
    @api totalItemCount;
    previousHandler() {
        this.dispatchEvent(new CustomEvent('previous'));
    }
    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
    get currentPageNumber() {
        return this.totalItemCount === 0 ? 0 : this.pageNumber;
    }
    get isFirstPage() {
        return this.pageNumber === 1;
    }
    get isLastPage() {
        return this.pageNumber >= this.totalPages;
    }
    get totalPages() {
        return Math.ceil(this.totalItemCount / this.pageSize);
    }
}

我们不会看每一行代码。主要的收获是Lightning Web组件使用标准的JavaScript模块。这是好事！

要在Lightning Web组件和Aura组件之间共享JavaScript代码，请将代码放在ES6模块中。两种编程模型都可以访问共享代码。即使您没有将所有代码都移至Lightning Web组件，您仍然可以访问在Aura组件的ES6模块中编写的新功能。

让我们看一个utils.js ES6模块的示例。

/* utils.js */
/**
 * Returns whether provided value is a function
 * @param {*} value - the value to be checked
 * @return {boolean} true if the value is a function, false otherwise
 */
export function isFunction(value) {
    return typeof value === 'function';
}

的 实用程序 模块导出一个 isFunction（） 返回提供的参数是否为函数的函数。

这是一个 c-libcaller 使用以下内容的Lightning Web组件 实用程序 模块。

/* libcaller.js */
import { LightningElement } from 'lwc';
// import the library
import { isFunction } from 'c/utils';
export default class LibCaller extends LightningElement {
    result;
    
    checkType() {
        // Call the imported library function
        this.result = isFunction(
            function() {
                console.log('I am a function');
            }
        ); 
    }
}

的 c-libcaller 组件导入 实用程序 模块并调用 isFunction模块导出的函数。论点传递给isFunction 是一个函数，因此结果设置为 真正。

现在，让我们看一个libcallerAura.cmp文件，该文件也使用实用程序 模块。

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <p>Aura component calling the utils lib</p>
    <!-- add the lib component -->
    <c:utils aura:id="utils" />
</aura:component>

的 libcaller光环 光环组件包括对 c：工具ES6模块。我们添加了一个光环：id 这样我们就可以在JavaScript代码中获得对该模块的引用。

这是libcallerAuraController.js文件。

({
    doInit: function(cmp) {
        // Call the lib here
        var libCmp = cmp.find('utils');
        var result = libCmp.isFunction(
            function() {
                console.log(" I am a function");
            }
        );
        console.log("Is it a function?: " + result);
    }
})

组件的控制器使用 cmp.find（’utils’） 匹配 光环：id在标记中并获得对该模块的引用。的实用程序 ES6模块导出 isFunction（），由Aura组件调用。论点传递给isFunction（） 是一个函数，因此结果设置为 真正。

要在Aura组件或Lightning Web组件中使用第三方JavaScript库，必须将库作为静态资源上载。在两种编程模型中，使用静态资源的语法不同。

在Aura组件中，使用 <ltng：require> 在标记中添加标签以加载静态资源。

<ltng:require scripts="{!$Resource.resourceName}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" />

resourceName是静态资源的名称。的afterScripts已加载 加载脚本并呈现组件后，将调用客户端控制器中的action。

在Lightning Web组件中，使用JavaScript导入静态资源。

import resourceName from '@salesforce/resourceUrl/resourceName';

然后，您使用 loadScript 和 loadStyle 加载第三方库。

有关使用导入的库的详细信息，请参阅《 Lightning Web Components开发人员指南》中的“使用第三方JavaScript库”。

在Aura组件中，您可以使用以下方式在JavaScript中动态创建组件： $ A.createComponent（）。在Lightning Web组件中没有动态创建组件的等效项。

这个体系结构的决定是有意的。不在Lightning Web组件中复制此模式的主要原因是Aura组件中的模式导致错误和混乱的代码。

Lightning Web组件中更好的替代方法是为您的组件创建多个HTML模板。组件的render（）该方法可以根据组件需求切换模板。这种模式更类似于其他JavaScript框架中使用的路由拆分。

迁移JavaScript代码时，请注意，它不是逐行转换。这是重新审视组件设计的好机会。

迁移到新的编程模型就像走一条新路径，将您带到相同的目的地。一路上的视觉和声音（以及您编写的代码）是不同的。

迁移组件也是使用Aura组件中可能未使用的ES6新功能（例如JavaScript模块）的绝佳机会。

在现代JavaScript开发的Trailhead模块为您提供了这些新功能很好的概述。

比较Aura Component和Lightning Web Components编程模型的最佳方法是查看两个模型中编写的相似组件的代码。

我们将研究DreamHouse应用程序中的某些组件，该应用程序是Salesforce开发来展示Lightning组件的相对复杂的应用程序。DreamHouse是一个基于Salesforce平台的房地产业务的示例应用程序。该应用程序使经纪人能够管理其财产，并使买家能够找到他们梦想中的家。

DreamHouse应用程序具有针对Aura组件和Lightning Web组件的单独实现，并且每个组件的完整代码都位于两个不同的GitHub存储库中。在两个版本的应用程序中，功能都不相同，但是有一些组件可用于比较两个编程模型。

GitHub存储库中提供了DreamHouse应用程序的两种实现的代码。

• DreamHouse Aura组件GitHub存储库
• DreamHouse Lightning Web组件GitHub存储库

我们将查看Aura组件中的代码片段，并向您展示Aura代码如何映射到Lightning Web组件代码。我们还将向您展示Aura组件概念如何转换为Lightning Web组件，并且我们将重点关注核心片段以说明这些概念。然后，如果您对更多上下文感兴趣，可以探索这些组件。

对于Aura组件和Lightning Web组件，组件捆绑包文件结构不同。这是文件在两种类型的组件之间的映射方式。

Lightning Web组件必须包含HTML文件，JavaScript文件和配置文件。它可以选择包括CSS文件和更多JavaScript文件。

不呈现任何UI的组件（也称为服务组件或库）必须包含JavaScript文件和元数据配置文件。

在本单元中，我们研究HTML和CSS文件。在下一单元中，我们探索JavaScript文件。

Lightning Web组件还具有一个配置文件，该文件定义了该组件的元数据值，包括打算在Lightning App Builder中使用的组件的设计配置。配置文件中包含一些由接口定义的元数据，例如flexipage：availableForRecordHome，在Aura组件中。

Aura组件在.cmp文件中包含标记。该文件以 <光环：组件> 标签，并且可以包含HTML和Aura特定的标签。

Lightning Web组件在.html文件中包含标记。该文件以<模板> 标签，并且可以包含HTML和动态内容的指令。

让我们看看Aura标记如何映射到Lightning Web组件的HTML和JavaScript文件中的内容。

闪电Web组件使用标准CSS语法。删除专有这个 Aura组件使用的类。

这是CSS文件的一部分， PropertyTile 灵气成分。

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
}
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

类似的CSS propertyTileLightning Web组件改用标准CSS。的这个 关键字特定于Aura，在Lightning Web组件中未使用。

.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.lower-third > p {
    padding: 0;
    margin: 0;
}
.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

您现在可以在两种编程模型中开发Lightning组件：原始模型（Aura组件）和新模型（Lightning Web组件）。就在您掌握了Aura组件的开发之后，我们就提供了Lightning Web组件！为什么，哦为什么，你问？好吧，我们创建了Lightning Web Components模型来与几年前建立原始Aura模型时不存在的Web标准保持一致。

本模块的目的是帮助您利用Aura组件的技能来加快对Lightning Web组件的了解。您将了解两种类型的组件如何在同一个应用程序中协同工作。

Lightning Web Components是W3C的Web Components标准的实现。它支持Web组件在浏览器中运行良好的部分，并且仅添加在Salesforce支持的所有浏览器中工作所需的内容。

现代JavaScript

在过去的几年中，具有ES6 +和Web标准的JavaScript语言（例如HTML模板，自定义元素和Web组件）已经有了很大的发展。Lightning Web Components为Lightning Component框架带来了现代的JavaScript和Web标准。

开发人员的生产力和满意度

学习如何更快地构建Lightning Web组件，因为您正在使用标准的JavaScript，HTML和CSS。有专有组件和API，可以更轻松地使用Salesforce，但是您可以通过标准方式访问和使用这些专有组件。

使用Lightning Web组件编写更少的代码，并且这些代码更易于阅读，维护和单元测试。

通过转到您喜欢的搜索引擎，可以更轻松地找到您的开发问题的答案。使用Web标准可以加快开发和调试时间。

使用您喜欢的开发工具，因为Lightning Web组件使用标准的JavaScript并可以与您选择的工具很好地配合使用。

代码性能

使用Web标准可以提高性能，因为更多功能是由浏览器而不是JavaScript框架本地执行的。根据使用情况的不同，这种改进可能会有所不同，但是我们相信您会为组件的更快的渲染时间感到惊喜。

在深入学习此模块之前，请完成Lightning Web Components基础知识模块，该模块为您提供了对新编程模型的出色介绍。

我们假设您熟悉Aura Components编程模型，除了与Lightning Web Components编程模型相比，我们不会解释其功能。如果您不熟悉Aura组件，请从“ Aura组件基础知识”模块开始。

您还需要了解现代JavaScript开发和ES6 JavaScript功能。如果这些术语令人困惑，则可以在Modern JavaScript Development模块中了解它们。该模块涵盖了开发Lightning Web组件所需的所有JavaScript技能。

学习任何新的编程模型或语言都是一段旅程。当您运行一些新代码时，就像在开阔的道路上驾驶敞篷车时的快感。然后，您更改一行代码，然后得到一个错误。您猛踩刹车，但遇到交通拥堵，拼命寻找下一个出口。记住，这是一个旅程。错误只是暂时的减速，您最终会到达目的地……希望在晚餐时间之前。

我们希望该模块为您的Lightning Web组件之旅做好准备。可以将模块视为打包旅行的行李箱。我们会逐步引导您完成冒险所需的一切。当您到达目的地时，我们不希望您打开行李箱并意识到您忘了打包内衣了！

让我们开始看看如何将组件组合在一起。您可以在另一个组件的主体内添加组件。这种组件组成使您可以从更简单的构建块组件中构建复杂的组件。组件组成的概念对于Aura组件和Lightning Web组件都是至关重要的。

我们知道您可能在开发Aura组件上投入了大量时间和精力。因此，我们投入了时间，使您能够在同一应用程序中组合Aura组件和Lightning Web组件。例如，您可以编写一个新的Lightning Web组件并将其添加到包含Aura组件的应用程序中。

除了将Aura组件和Lightning Web组件组合在一起之外，这两种类型的组件还可以与事件进行通信。这是一种健康的共存。

像任何关系一样，有一些规则可以确保所组成的组件一起良好地工作。

如果您要构建一个Lightning Web组件，并且其主体中还需要其他子组件，则这些子组件也必须作为Lightning Web组件构建。请记住，Lightning Web组件不能包含Aura组件。

如果Lightning Web组件是嵌套组件树中最外面的组件，则任何嵌套组件都不能是Aura组件。

两种编程模型一起工作的优点之一是，您可以决定将一个Aura组件迁移到Lightning Web组件，然后您的应用程序继续运行。即使您决定将Lightning Web组件用于新组件，您仍然可以利用对Aura组件的任何现有投资。

另外，您可以在ES6模块中编写新代码，并从Lightning Web组件和Aura组件访问该代码。这种模式为Aura开发人员打开了现代JavaScript开发的大门。

迁移代码很少是一条直线路。Lightning Web Components的编程模型与Aura Components的模型根本不同。将Aura组件迁移到Lightning Web组件不是逐行转换，这是重新访问组件设计的好机会。在迁移Aura组件之前，请评估该组件的属性，接口，结构，模式和数据流。

最容易迁移的组件是仅呈现UI的简单组件。性能至关重要的Aura组件很适合迁移到Lightning Web组件。

通过迁移更大的组件树（组件内的组件）而不是单个组件，可以在性能和开发人员生产率上获得更多收益。但是，迁移一个组件并查看Aura编程模型中的概念如何映射到Lightning Web Components编程模型中的概念是非常有用的学习经验。

迁移一个组件之后，您将可以更好地确定对您和您的组织是否有意义：

• 进行更大的迁移工作。
• 仅将Lightning Web组件用于新组件。
• 暂时使用Aura组件。

选择权取决于您，每个人的选择都不同，具体取决于用例和可用资源。无论您做出什么决定，迁移组件都是一项有价值的学习活动。