Fire Events From Lightning Component and Handle in VisualForce Page
Lightning Event:
<!--SampleEvent.evt--> <aura:event type="APPLICATION" description="Sample Event"> <aura:attribute type="string" name="msg" /> </aura:event>
Lightning Component:
<!--SampleComponent.cmp--> <aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global"> <!--Declare Aura Event--> <aura:registerEvent name="sampleEvent" type="c:SampleEvent" /> <!--Component Start--> <div class="slds-m-around_xx-large"> <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.doAction}"/> </div> <!--Component End--> </aura:component>
Lightning Controller:
({ doAction : function(component, event, helper) { //Get Event var sampleEvent = $A.get("e.c:sampleEvent"); //Set Parameter Value sampleEvent.setParams({"msg":"Hello World!!"}); //Fire Event sampleEvent.fire(); } })
Lightning App:
<!--SampleApp.app--> <aura:application extends="ltng:outApp" access="global"> <!--Lightning component--> <aura:dependency resource="c:SampleComponent"/> </aura:application>
Visualforce Page:
<apex:page sidebar="false" showHeader="false"> <apex:includeLightning /> <!--Lightning Container--> <div style="width:100%;height:100px;" id="LightningContainer" /> <script type="text/javascript"> //Create Lightning Component $Lightning.use("c:SampleApp", function() { $Lightning.createComponent("c:SampleComponent", { },"LightningContainer", function(component) { $A.eventService.addHandler({ "event": "c:SampleEvent", "handler" : getMessage}); }); }); //Function to call Lightning Component Function var getMessage = function(event){ var msg = event.getParam("msg"); alert(msg); }; </script> </apex:page>