コンポーネントのコンポジション

コンポーネントをどのようにまとめられるか見てみましょう。

nestedComponents.cmp は、コンポーネントを別のコンポーネント内に入れる例です。

コンポーネントのソース

出力

既存のコンポーネントを入れるのは、HTML タグの挿入に似ています。コンポーネントをその <namespace>:<component> 形式の「記述子」で参照するだけです。nestedComponents.cmp は、auradocs 名前空間内に存在する helloHTML.cmp コンポーネントを参照します。したがって、その記述子は auradocs:helloHTML です。

nestedComponents.cmp が auradocs:helloAttributes をどのように参照しているかについても注目してください。HTML タグに属性を追加するのと同様に、コンポーネント内の属性値をコンポーネントタグの一部として設定できます。nestedComponents.cmp では、helloAttributes.cmp の whom 属性を「component composition」に設定しています。

helloHTML.cmp のソースは次のようになります。

コンポーネントのソース

CSS ソース

出力

helloAttributes.cmp のソースは次のようになります。

コンポーネントのソース

属性の渡し方

属性をネストされたコンポーネントに渡すこともできます。nestedComponents2.cmp は nestedComponents.cmp と似ていますが、passthrough 属性が含まれている点が異なります。この値は auradocs:helloAttributes の属性値として渡されます。

コンポーネントのソース

出力

helloAttributes が渡された属性値を使用していることがわかります。

定義とインスタンス

オブジェクト指向プログラミングに慣れているユーザなら、クラスとそのクラスのインスタンスの違いをご存じでしょう。コンポーネントにも同じような概念があります。.cmp リソースを作成することで、そのコンポーネントの定義 (クラス) を指定します。.cmp にコンポーネントタグを追加することで、そのコンポーネント (のインスタンス) への参照を作成します。

もちろん、異なる属性を持つ同じコンポーネントのインスタンスを複数追加することもできます。nestedComponents3.cmp では、異なる属性値を持つ別のインスタンスの auradocs:helloAttributes を追加します。auradocs:helloAttributes コンポーネントの 2 つのインスタンスでは、それぞれの whom 属性の値が異なっています。

コンポーネントのソース

出力