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