Lightning コンポーネント開発者ガイド
j継承されるコンポーネントの属性
属性値は、どの拡張レベルでも同じです。body 属性の場合はこのルールに例外がありますが、これについては後で説明します。
簡単な例から始めましょう。c:super には、値が「Default description」の description 属性があります。
1<!--c:super-->
2<aura:component extensible="true">
3 <aura:attribute name="description" type="String" default="Default description" />
4
5 <p>super.cmp description: {!v.description}</p>
6
7 {!v.body}
8</aura:component>{!v.body} 式についてはまだ心配しないでください。これについては、body 属性を取り扱うときに説明します。
c:sub は、<aura:component> タグで extends="c:super" を設定することによって c:super を拡張します。
1<!--c:sub-->
2<aura:component extends="c:super">
3 <p>sub.cmp description: {!v.description}</p>
4</aura:componentsub.cmp には、継承される description 属性へのアクセス権があり、その値は sub.cmp および super.cmp と同じです。
継承される属性の値を設定するには、サブコンポーネントのマークアップで <aura:set> を使用します。
継承される body 属性
すべてのコンポーネントは <aura:component> から body 属性を継承します。body の継承動作は、他の属性とは異なります。コンポーネントの拡張レベルごとに異なる値を指定して、継承チェーンのコンポーネントごとに異なる出���が可能です。例を見てみると、この点が明確になります。
別のタグで囲まれていない独立したマークアップは、body の一部とみなされます。これは、その独立したマークアップを <aura:set attribute="body"> 内にラップするのと同じです。
コンポーネントのデフォルトのレンダラは、その body 属性を反復処理し、すべてを表示し、表示データをスーパーコンポーネントに渡します。スーパーコンポーネントは、{!v.body} をマークアップに含めることによって、渡されたデータを出力できます。スーパーコンポーネントが存在しない場合は、ルートコンポーネントに達しているため、データが document.body に挿入されています。
簡単な例を使用して、body 属性がコンポーネントのさまざまな拡張レベルでどのように動作するかを確認してみましょう。次の 3 つのコンポーネントがあります。
c:superBody はスーパーコンポーネントです。これは本質的に <aura:component> を拡張します。
1<!--c:superBody-->
2<aura:component extensible="true">
3 Parent body: {!v.body}
4</aura:component>この時点では、{!v.body} が c:superBody を拡張するコンポーネントによって渡されるデータのプレースホルダにすぎないため、c:superBody では何も出力されません。
c:subBody は、<aura:component> タグで extends="c:superBody" を設定することによって c:superBody を拡張します。
1<!--c:subBody-->
2<aura:component extends="c:superBody">
3 Child body: {!v.body}
4</aura:component>c:subBody の出力は、次のようになります。
1Parent body: Child body:つまり、c:subBody は、{!v.body} の値をスーパーコンポーネント c:superBody で設定します。
c:containerBody には、c:subBody への参照が含まれます。
1<!--c:containerBody-->
2<aura:component>
3 <c:subBody>
4 Body value
5 </c:subBody>
6</aura:component>c:containerBody で、c:subBody の body 属性を Body value に設定します。c:containerBody の出力は、次のようになります。
1Parent body: Child body: Body value