适用于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>