Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jコンポーネントのコンポジション
コンポーネントをどのようにまとめられるか見てみましょう。まず、簡単なコンポーネント c:helloHTML と c:helloAttributes を作成しましょう。その後で、ラッパーコンポーネントの c:nestedComponents を作成し、簡単なコンポーネントを囲みます。
helloHTML.cmp のソースは次のようになります。
CSS ソース
出力
helloAttributes.cmp のソースは次のようになります。
nestedComponents.cmp では、他のコンポーネントをマークアップ内に追加するコンポジションを使用します。
出力
既存のコンポーネントを追加するのは、HTML タグの挿入に似ています。コンポーネントをその namespace:component 形式の「記述子」で参照します。nestedComponents.cmp は、c 名前空間内に存在する helloHTML.cmp コンポーネントを参照します。したがって、その記述子は c:helloHTML です。
nestedComponents.cmp が c:helloAttributes をどのように参照しているかについても注目してください。HTML タグに属性を追加するのと同様に、コンポーネント内の属性値をコンポーネントタグの一部として設定できます。nestedComponents.cmp では、helloAttributes.cmp の whom 属性を「component composition」に設定しています。
属性の渡し方
属性をネストされたコンポーネントに渡すこともできます。nestedComponents2.cmp は nestedComponents.cmp と似ていますが、passthrough 属性が含まれている点が異なります。この値は c:helloAttributes の属性値として渡されます。
出力
helloAttributes が渡された属性値を使用しています。
定義とインスタンス
オブジェクト指向プログラミングでは、クラスとそのクラスのインスタンスには違いがあります。コンポーネントにも同じような概念があります。.cmp リソースを作成することで、そのコンポーネントの定義 (クラス) を指定します。.cmp にコンポーネントタグを追加することで、そのコンポーネント (のインスタンス) への参照を作成します。
もちろん、異なる属性を持つ同じコンポーネントのインスタンスを複数追加することもできます。nestedComponents3.cmp では、異なる属性値を持つ別のインスタンスの c:helloAttributes を追加します。c:helloAttributes コンポーネントの 2 つのインスタンスでは、それぞれの whom 属性の値が異なっています。
出力
