ファセットの移行

Aura コンポーネントのファセットを Lightning Web コンポーネントのスロットに移行します。

Aura コンポーネントのファセットは、型が Aura.Component[] の属性です。次に例を示します。

1<aura:component>
2  <aura:attribute name="firstName" type="Aura.Component[]" />
3  <aura:attribute name="lastName" type="Aura.Component[]" />
4
5  <p>First Name: {!v.firstName}</p>
6  <p>Last Name: {!v.lastName}</p>
7</aura:component>

Lightning Web コンポーネントでは、ファセットの代わりにスロットを使用します。このテンプレートでは、2 つの名前付きスロットを定義します。

1<!-- namedSlots.html -->
2<template>
3  <p>First Name: <slot name="firstName">Unknown</slot></p>
4  <p>Last Name: <slot name="lastName">Unknown</slot></p>
5</template>

このコードでは、<c-namedslots> コンポーネントを使用します。

1<!-- slotsWrapper.html -->
2<template>
3  <c-named-slots>
4    <span slot="firstName">Willy</span>
5    <span slot="lastName">Wonka</span>
6  </c-named-slots>
7</template>

次の HTML は、表示される出力です。

1<p>First Name: <span>Willy</span></p>
2<p>Last Name: <span>Wonka</span></p>

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。