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

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

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

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

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

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

このパターンの例として、子 lightning-button コンポーネントを使用する lightning-button-group 基本コンポーネントが挙げられます。

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

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

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

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

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

base-components-recipes リポジトリの buttonGroup コンポーネントは、slotchange イベントを使用します。コンポーネントライブラリで、このコンポーネントのデモを参照してください。

カスタムイベントパターンの例として、子 lightning-tab コンポーネントを使用する lightning-tabset 基本コンポーネントが挙げられます。

この場合、親の lightning-tabset コンポーネントは、onprivatetabregister および onprivatetabdatachange カスタムイベントハンドラを使用して、渡すコンテンツのライフサイクルを管理します。

宣言的な方法でコンポーネントを構成すると、コンポーネント作成者の複雑さが増すことがわかりました。ここで、データ駆動型の方法を考えてみましょう。slot コンテンツのライフサイクルを管理する代わりに、また親コンポーネントと子コンポーネント間の詳細な管理を必要とせずに、コンポーネントでデータの変更時にリアクティブな方法で変更を取得します。

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

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

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

関連トピック

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