Lightning コンポーネント開発者ガイド
jコンポーネントのコンポジション
コンポーネントをどのようにまとめられるか見てみましょう。まず、簡単なコンポーネント docsample:helloHTML と docsample:helloAttributes を作成しましょう。その後で、ラッパーコンポーネントの docsample:nestedComponents を作成し、簡単なコンポーネントを囲みます。
helloHTML.cmp のソースは次のようになります。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:helloHTML-->
18<aura:component>
19 <div class="white">
20 Hello, HTML!
21 </div>
22
23 <h2>Check out the style in this list.</h2>
24
25 <ul>
26 <li class="red">I'm red.</li>
27 <li class="blue">I'm blue.</li>
28 <li class="green">I'm green.</li>
29 </ul>
30</aura:component>
31CSS ソース
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS {
18 background-color: grey;
19}
20
21.THIS.white {
22 background-color: white;
23}
24
25.THIS .red {
26 background-color: red;
27}
28
29.THIS .blue {
30 background-color: blue;
31}
32
33.THIS .green {
34 background-color: green;
35}
36出力
helloAttributes.cmp のソースは次のようになります。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:helloAttributes-->
18<aura:component>
19 <aura:attribute name="whom" type="String" default="world"/>
20 Hello {!v.whom}!
21</aura:component>
22nestedComponents.cmp では、他のコンポーネントをマークアップ内に追加するコンポジションを使用します。
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:nestedComponents-->
18<aura:component>
19 Observe! Components within components!
20
21 <docsample:helloHTML/>
22
23 <docsample:helloAttributes whom="component composition"/>
24</aura:component>
25出力
既存のコンポーネントを追加するのは、HTML タグの挿入に似ています。コンポーネントをその namespace:component 形式の「記述子」で参照します。nestedComponents.cmp は、docsample 名前空間内に存在する helloHTML.cmp コンポーネントを参照します。したがって、その記述子は docsample:helloHTML です。
nestedComponents.cmp が docsample:helloAttributes をどのように参照しているかについても注目してください。HTML タグに属性を追加するのと同様に、コンポーネント内の属性値をコンポーネントタグの一部として設定できます。nestedComponents.cmp では、helloAttributes.cmp の whom 属性を「component composition」に設定しています。
属性の渡し方
属性をネストされたコンポーネントに渡すこともできます。nestedComponents2.cmp は nestedComponents.cmp と似ていますが、passthrough 属性が含まれている点が異なります。この値は docsample:helloAttributes の属性値として渡されます。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:nestedComponents2-->
18<aura:component>
19 <aura:attribute name="passthrough" type="String" default="passed attribute"/>
20 Observe! Components within components!
21
22 <docsample:helloHTML/>
23
24 <docsample:helloAttributes whom="{!v.passthrough}"/>
25</aura:component>
26出力
helloAttributes が渡された属性値を使用しています。
定義とインスタンス
オブジェクト指向プログラミングでは、クラスとそのクラスのインスタンスには違いがあります。コンポーネントにも同じような概念があります。.cmp リソースを作成することで、そのコンポーネントの定義 (クラス) を指定します。.cmp にコンポーネントタグを追加することで、そのコンポーネント (のインスタンス) への参照を作成します。
もちろん、異なる属性を持つ同じコンポーネントのインスタンスを複数追加することもできます。nestedComponents3.cmp では、異なる属性値を持つ別のインスタンスの docsample:helloAttributes を追加します。docsample:helloAttributes コンポーネントの 2 つのインスタンスでは、それぞれの whom 属性の値が異なっています。
1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--docsample:nestedComponents3-->
18<aura:component>
19 <aura:attribute name="passthrough" type="String" default="passed attribute"/>
20 Observe! Components within components!
21
22 <docsample:helloHTML/>
23
24 <docsample:helloAttributes whom="{!v.passthrough}"/>
25
26 <docsample:helloAttributes whom="separate instance"/>
27</aura:component>
28出力
