Refresh lightning:tab on change

Question

I Built a lightning component which is used in opportunity layout. This component used some child component as lightning tab.

The problem is when I edit and change some value in first tab is not reflecting the second tab I need to refresh the page to see the updated value in second tab.

My question is how to refresh the tab while switching.

my code looks like below:

<aura:component>
    <lightning:tabset selectedTabId="two">
        <lightning:tab label="Item One" id="one">
            <c:child 1>
        </lightning:tab>
        <lightning:tab label="Item Two" id="two">
            <c:child 2>
        </lightning:tab>
        <lightning:tab label="Item Three" id="three">
            <c:child 3>
        </lightning:tab>
    </lightning:tabset>
</aura:component>

Answer 1

You can try creating the component's directly using JS.

for ex.

//You have to assign an aura:id in order to set a component into the element
<lightning:tab label="Item One" id="one" aura:id="tab-one">
</lightning:tab>

    //get the element to set a child component
    var tab1 = component.find('tab-one');
    //create the child component here
    $A.createComponent(
       "c:child1", {},
        function(childCmp, status, errorMessage){
            if (status === "SUCCESS") {
                //set the child component here
                tab1.set("v.body", [childCmp]);
            }                
        }
    );

Also, you need to to create this component everytime when you switch between tabs.

This approach will always load the component directly into the tab.