0

I was exploring inheritance in lightning component and trying below examples

<!--c:superBody-->
<aura:component extensible="true">
    <aura:attribute name ="Name" type ="String" default="Test" />
    Parent body: {!v.body}
    Hello
    Address: {!v.Name}
    component.get{!v.body}
</aura:component>`

<!--c:subBody-->
<aura:component extends="c:SuperBody">
    <aura:set attribute="Name" value="Test123" />
    Child body: {!v.body}
</aura:component>

<aura:application >
    <c:SubBody />
</aura:application>

I don't understand the output which is displayed using .app. It displayed as- Parent body: Child body: Hello Address: Test123 component.get Child body: Shouldn't it be body[] of c:superBody be displayed first and then body[] of c:subBody and output be as-Parent body: Hello Address:Test123 component.get Child body: ?

1

The body attribute is a sort of "special" attribute. It provides the content of the child's body. You can see this in the following code:

<!-- bodyWrapper.cmp -->
<aura:component>
    Body is: {!v.body}
</aura:component>

<!-- parent.app -->
<aura:application>
    <c:bodyWrapper>
        Some content here
    </c:bodyWrapper>
<aura:application>

The output would be:

Body is: Some content here

As you can see, the child's content is placed in body, which is then rendered in the parent.

Similarly, when extending, the child's contents will appear in the parent's body. This allows a "template" design, where a child can place its content in to the component being extended. As you've noticed, you can also set additional attributes, which will be similarly populated in the "template" provided by the base component.

I don't think this is explained in the documentation very well, but that's how extending a component works. If the child component had multiple attributes to set the in parent, it could use aura:set to specify each of those attributes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.