If you are refreshing the component from the context of a parent, you don't need to use an event - you can expose a method
to the parent and get it to call that.
If you are refreshing the component from within the child itself, you could either use an event or re-run your init
routine.
So for a parent calling a public method
:
<aura:method name="reInit" action="{!c.doInit}" description="Runs the init method again ">
The parent could get a reference to the child component and call childComponent.reInit()
For a parent totally refreshing the child, the parent could dynamically recreate the component:
//clear body of host component just in case
var hostComponent = component.find("enclosingComponent");
hostComponent.set("v.body", []);
$A.createComponent(
'c:YourChildComponent', {
"someParam":"someValue"
},
function(newComponent, status, errorMessage) {
//Add the new button to the body array
if (status === "SUCCESS") {
var body = hostComponent.get("v.body");
body.push(newComponent);
hostComponent.set("v.body", body);
} else if (status === "INCOMPLETE") {
console.log("No response from server or client is offline.");
} else if (status === "ERROR") {
console.log("Error: " + errorMessage);
}
}
);
From the child component
If you are doing this from within the component, you can despatch an event to the parent if you want a total refresh, or run the reInit
method yourself.
You can define a new COMPONENT
event fire it to tell the parent that you want to be refreshed.
<aura:event type="COMPONENT" description="Event used to tell the parent to refresh" >
<aura:attribute name="componentName" type="string"/>
</aura:event>
In the child component:
<!--markup-->
<aura:registerEvent name="refreshChildComponent" type="c:RefreshChild"/>
//handler
var e = component.getEvent("refreshChildComponent");
e.setParams({ "componentName": "child1"});
e.fire();
In the parent component:
<aura:handler name="refreshChildComponent" event="c:RefreshChild" action="{!c.refreshChild}" />
In the parent helper, the same code as above could be called - in the parent calling a public method section
Best Answer
I have recently encountered the same situation. If anyone is looking out for the solution, here is what you need to do !
let me first reframe the situation here,
"Lightning Component is invoked from Visualforce Page using ltng:outApp. You would want to change data or have control on already created Lightning Component from a button click on Visualforce Page"
Solution:
You might have used $Lightning.use already in Visualforce page inside which you create Lightning Component using $Lightning.createComponent.
Now, create a lightning event , let's say "refreshEvent" and handle the event in your lightning component, "MyLC" using aura:handler
You need to fire this event inside Visualforce page on button click. But when you implement this, you will be getting error "Cannot read property of fire of undefined".
Let's go back to basics, when you are using Lightning:use, you are implementing Lightning framework inside visualforce page, you can fire lightning event only inside this framework. So, when you fire event directly inside the page, console will not understand fire command. You need to find a way to fire the event inside Lightning:use.
My requirement was to refresh or initialize Lightning Component when I click on a button in Visualforce Page. For this I used a boolean variable in javascript, using which I either create Lightning component or fire Lightning Event. Please check the sample code below,
In the page:
Javascript: