Lightning Aura Components Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Component Body
The <aura:component> tag can contain tags, such as <aura:attribute>, <aura:registerEvent>, <aura:handler>, <aura:set>, and so on. Any free markup that is not enclosed in one of the tags allowed in a component is assumed to be part of the body and is set in the body attribute.
The body attribute has type Aura.Component[]. It can be an array of one component, or an empty array, but it's always an array.
In a component, use “v” to access the collection of attributes. For example, {!v.body} outputs the body of the component.
Setting the Body Content
To set the body attribute in a component, add free markup within the <aura:component> tag. For example:
1<aura:component>
2 <!--START BODY-->
3 <div>Body part</div>
4 <lightning:button label="Push Me" onclick="{!c.doSomething}"/>
5 <!--END BODY-->
6</aura:component>To set the value of an inherited attribute, use the <aura:set> tag. Setting the body content is equivalent to wrapping that free markup inside <aura:set attribute="body">. Since the body attribute has this special behavior, you can omit <aura:set attribute="body">.
The previous sample is a shortcut for this markup. We recommend the less verbose syntax in the previous sample.
1<aura:component>
2 <aura:set attribute="body">
3 <!--START BODY-->
4 <div>Body part</div>
5 <lightning:button label="Push Me" onclick="{!c.doSomething}"/>
6 <!--END BODY-->
7 </aura:set>
8</aura:component>The same logic applies when you use any component that has a body attribute, not just <aura:component>. For example:
1<lightning:tabset>
2 <lightning:tab label="Tab 1">
3 Hello world!
4 </lightning:tab>
5</lightning:tabset>This is a shortcut for:
1<lightning:tabset>
2 <lightning:tab label="Tab 1">
3 <aura:set attribute="body">
4 Hello World!
5 </aura:set>
6 </lightning:tab>
7</lightning:tabset>Accessing the Component Body
To access a component body in JavaScript, use component.get("v.body").