Lightning Web 组件和 Aura 组件协同工作

互操作性层使 Lightning Web 组件和 Aura 组件能够在应用程序中协同工作。

您可以编写新的 Lightning Web 组件，并将其添加到包含 Aura 组件的应用程序中。或者，您可以通过将应用程序中的单个 Aura 组件替换为 Lightning Web 组件来按计划迭代迁移。

Lightning Web 组件和 Aura 组件可以协同工作，但您必须了解一些限制。

重要

Aura 组件可以包含 Lightning Web 组件。但是，反之则不然。Lightning Web 组件不能包含 Aura 组件。

从 Lightning Web 组件编写 Aura 组件

您可以从 Lightning Web 组件组成 Aura 组件，但不能以相反的方式组合。为了在层次结构中向下通信，父级设置子级的属性。要决定何时以及如何将 Lightning Web 组件嵌套在 Aura 组件中，了解分面和插槽非常重要。

在 Aura 组件中，要引用 Aura 组件或 Lightning Web 组件，请使用驼峰大小写，并用冒号分隔命名空间和组件名称。

此 Aura 组件由 ，前者是基本的 Lightning 组件，后者是 Lightning Web 组件。lightning:cardc:lwcHelloWorld

<!-- auraComponent.cmp file -->
<aura:component implements="flexipage:availableForAllPageTypes">
  <lightning:card title="Aura Hello World" iconName="custom:custom30" />
  <c:lwcHelloWorld name="Earthling" />
</aura:component>

该代码显示经典问候语。（它还引用了组件。大多数基本 Lightning 组件都以 Aura 和 LWC 的形式提供。lwcHelloWorldlightning-card

<!-- lwcHelloWorld.html -->
<template>
  <lightning-card title="LWC Hello World" icon-name="custom:custom14">
    <div class="slds-card__body slds-card__body_inner">Hello, {name}!</div>
  </lightning-card>
</template>

该组件具有一个公共属性，Aura 组件使用该属性设置该属性。namename

// lwcHelloWorld.js
import { LightningElement, api } from "lwc";

export default class HelloWorld extends LightningElement {
  @api name;
}

提示

在 trailheadapps/pure-aloe 示例应用程序中，请参阅 Aura irrigationWrapperManager 组件，该组件设置子 irrigationManager Lightning Web 组件的属性。

刻面和插槽

在 Aura 组件和 Lightning Web 组件中，您可以将组件添加到另一个组件的主体中。在 Aura 中，将组件添加到分面中。在 Lightning Web 组件中，您可以将组件添加到插槽中。

在 Aura 中，属性是一个 facet。分面是任何类型的属性，这只是一种奇特的说法，你可以为属性设置一个组件数组。bodyAura.Component[]

用更不花哨的术语来说，把一个切面想象成一个三明治。您可以将任意数量的成分（组件）塞入三明治（切面）中。

<aura:component>
  <!-- start of component body facet-->
  <p>Feeling hungry?</p>
  <c:bacon />
  <c:lettuce />
  <c:tomato />
  <!-- end of component body facet -->
</aura:component>

构建 Aura 组件还是 Lightning Web 组件？

您可能渴望了解更多信息，甚至可能在阅读了有关 Aura 中的方面后享用午餐。现在，让我们看看您决定构建 Aura 组件还是 Lightning Web 组件的方面因素。

如果您正在构建一个新的 Lightning Web 组件，该组件需要其主体中的其他子组件，则这些子组件也必须是 Lightning Web 组件。请记住，Lightning Web 组件不能包含 Aura 组件。

想象一下，一个 Lightning Web 组件是嵌套组件树中最外层的组件。将闪电网络组件视为俄罗斯套娃中最大的娃娃，也称为俄罗斯套娃。俄罗斯套娃包含一组嵌套娃娃，每个娃娃包含一个较小的娃娃。如果最大的玩偶是 Lightning Web 组件，那么较小的嵌套玩偶都不能是 Aura 组件。

示例：将组件传递到插槽中

考虑一个允许在其主体中使用其他组件的 Lightning Web 组件。标记是所有者组件可以将标记传递到其中的占位符。c-wrapper<slot>

<!-- wrapper.html -->
<template>
  <slot></slot>
</template>

Lightning Web 组件将组件传递到插槽中。c-applightning-card

<!-- app.html -->
<template>
  <c-wrapper>
    <lightning-card>
      <lightning-icon icon-name="utility:connected_apps"></lightning-icon>
      Card Title
      <p class="slds-p-horizontal_small">Card Body</p>
    </lightning-card>
  </c-wrapper>
</template>

重要

如果 Lightning Web 组件包含插槽，您可以将其嵌套在 Aura 组件中，但不能使用该插槽。

从父 Aura 组件调用子 Lightning Web 组件方法

要从 Aura 组件调用 Lightning Web 组件中定义的方法，请为 Lightning Web 组件提供 并使用 ，就像引用 Aura 组件一样。例如。aura:idcmp.find()cmp.find('childLwc').childLwcMethod()

在 Aura 组件渲染之前，不会创建 Lightning Web 组件。在此之前（例如，在 Aura 组件初始化期间），您无法在 Lightning Web 组件上调用方法。

将事件发送到封闭的 Aura 组件

若要从子级与父级进行通信，请调度事件。Lightning Web 组件触发 DOM 事件。封闭的 Aura 组件可以侦听这些事件，就像封闭的 Lightning Web 组件一样。封闭的 Aura 组件可以捕获事件并处理它。（可选）Aura 组件可以触发 Aura 事件，以便与其他 Aura 组件或应用容器进行通信。

提示

lwc-recipes 存储库中的 auraEmbeddedLWC 组件展示了如何在父 Aura 组件中嵌入 Lightning Web 组件并与事件进行通信。

下面的示例演示了此技术。此 Lightning Web 组件在其 JavaScript 文件中触发自定义事件。filterchange

// categoryFilter.js
import { LightningElement } from "lwc";

export default class CategoryFilter extends LightningElement {
  handleCheckboxChange() {
    // Get the labels of selected checkboxes
    const filters = Array.from(this.template.querySelectorAll("lightning-input"))
      .filter((element) => element.checked)
      .map((element) => element.label);
    const filterChangeEvent = new CustomEvent("filterchange", {
      detail: { filters },
    });
    // Fire the custom event
    this.dispatchEvent(filterChangeEvent);
  }
}

<!-- categoryFilter.html -->
<template>
  <lightning-input
    label="Category 1"
    type="checkbox"
    onchange={handleCheckboxChange}
  ></lightning-input>
  <lightning-input
    label="Category 2"
    type="checkbox"
    onchange={handleCheckboxChange}
  ></lightning-input>
</template>

封闭的 Aura 组件包装器为自定义事件添加处理程序。请注意，事件处理程序 与前缀为“on”的事件名称匹配。也就是说，用于处理名为 的事件。onfilterchangeonfilterchangefilterchange

<!-- auraDomEventListener.cmp -->
<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="message" type="String" default="No selection"/>

    <lightning:card title="AuraDomEventListener" iconName="custom:custom30">
        <aura:set attribute="actions">
            <span class="aura">Aura Component</span>
        </aura:set>
        <div class="slds-m-around_medium">
            <lightning:layout>
                <lightning:layoutItem size="4">
                    <!-- This is an LWC component -->
                    <c:categoryFilter onfilterchange="{!c.handleFilterChange}"/>
                </lightning:layoutItem>
                <lightning:layoutItem size="8" class="slds-p-left_medium">
                    {!v.message}
                </lightning:layoutItem>
            </lightning:layout>
        </div>
    </lightning:card>
</aura:component>

注意

您只能在 DOM 事件冒泡到的第一个 Aura 组件中指定一个处理程序。onfilterchange

Aura 组件的控制器接收事件。您可以随心所欲地处理该事件。此组件对在 Lightning Web 组件事件的属性中传递的数组进行操作。您可以选择触发新的 Aura 事件以与其他 Aura 组件进行通信。filtersdetails

// auraDomEventListenerController.js
({
  handleFilterChange: function (component, event) {
    var filters = event.getParam("filters");
    component.set(
      "v.message",
      filters.length > 0 ? "Your selection: " + filters.join() : "No selection",
    );
  },
});

在 LWC 和 Aura 之间共享 JavaScript 代码

要在 Lightning Web 组件和 Aura 组件之间共享 JavaScript 代码，请将代码放在服务组件的 ES6 模块中。

要共享 ES6 模块：

1. 使用 Lightning Web 组件编程模型创建服务组件（库）。
2. 要在 Lightning Web 组件中使用代码，请在组件的 JavaScript 文件中导入并引用它。
3. 若要在 Aura 组件中使用代码，请使用导入 Aura 组件并调用其方法时所用的相同语法。有关示例代码，请参阅 Aura lightning：navigationItemAPI 组件文档。请注意，这是一个 Aura 组件，而不是 ES6 模块，但要导入 ES6 模块，请使用相同的 Aura 语法。lightning:navigationItemAPI

提示

lwc-recipes 存储库有一个模块，用于实现 Lightning Web 组件和 Aura 组件之间的通信。该模块已停用，但可以在不支持 Lightning 消息服务的 Experience Cloud 等容器中使用。lmsPublisherWebComponentpubsub