スロットとデータを使用したコンポーネントの構成方法の比較

他のコンポーネントを含むコンポーネントを作成する場合、コンポーネントの階層のライフサイクルを考慮して、スロットを使用する宣言型のアプローチや、子コンポーネントが親のデータ変更に反応するデータ駆動型のアプローチを使用します。

コンポーネントを宣言的に作成するための一般的なパターンは次のようになります。

この例には、slot 要素を使用する c-parent コンポーネントがあります。コンシューマにとっては便利ですが、slot 要素を通過するコンテンツのライフサイクルを管理する必要があります。

スロットに渡されたコンテンツを管理する方法はいくつかあります。

• slotchange イベントを使用します。これが推奨される方法です。slotchange は DOM を通って上に伝達しますが、シャドウ境界を越えないので、スロットを含む親コンポーネントが反応できます。
• カスタムイベントを使用して、子コンポーネントの変更を親コンポーネントに通知することで、操作するコンポーネントのメソッドを非公開にすることができます。ネイティブの Shadow を使用するようにコンポーネントを徐々に移行しており、これによりコンポーネントは slotchange イベントを使用するように強制されるため、この方法は推奨されなくなりました。

スロットに slotchange イベントを使用することで、親と子コンポーネント間の slot コンテンツのライフサイクルを管理できます。このパターンの例として、子 lightning-button コンポーネントを使用する lightning-button-group 基本コンポーネントが挙げられます。

親の lightning-button-group コンポーネントには、slot 要素と、渡すコンテンツのライフサイクルを管理する onslotchange イベントが含まれています。

slotchange ハンドラは、スロットの内容が変更された場合に、スロット化された要素の更新を処理します。この場合、親の lightning-button-group コンポーネントは、グループ内の表示順序 (先頭、中間、末尾) に基づくか、グループ内の唯一のボタンかどうかに基づいて、子の lightning-button コンポーネントの CSS クラスを決定します。

getter を使用してボタンクラスを変更します。

lightning-button-group コンポーネントが lightning-button コンポーネントを登録できるように、登録イベントを起動します。

子コンポーネントが使用できなくなったときに、親コンポーネントに通知します。

データ駆動型の方法を使用することで、データが変更されたときにコンポーネントがアクティブに変更を取得します。

この例では、データ駆動型の方法を使用して子コンポーネントを構成します。

データを渡すには、JavaScript オブジェクトを使用します。子コンポーネントは、その親からのデータの変更にのみ反応します。

使用事例が複雑な場合は、データ駆動型の方法をお勧めします。データ駆動型の方法を使用して作成された基本コンポーネントの例は lightning-datatable です。

関連トピック

• スロットにマークアップを渡す