Lightning inside visualforce page - how to get Lightning Components data/value from visualforce page

Question

I'm using visual force page to embed my lightning component. Is there a way to get the lightning component data/values(let's say that component has some text box and dropdowns with user input values) from my visual force page ?

Answer 1

This is possible you can have communication enabled between lightning component and visualforce both way.

Consider below code:

<apex:page >
    <apex:includeLightning />
    <div id="lightning" />
    <button type="button" onclick="callLightningEvent();">Call Lightning Code From VF</button>
    <script>        
        window.onload = function() {
           $Lightning.use("c:LightningOutExampleApp", function() {               
              var comapp=$Lightning.createComponent("c:LightningOutExample", 
              {},             
              "lightning",
              function(component) {
                console.log('Lightning out -->Component has been loaded.');
                $A.eventService.addHandler({ "event": "c:lightningAppExternalEvent", "handler" : myFunctionFromVisualforce });                
              });              
            });            
        }

        function callLightningEvent(){
            var lightningEvent = $A.get("e.c:lightningAppEvent");
            lightningEvent.setParams({'data':{'TestDataKey':'TestDataValue'}});
            lightningEvent.fire();
        }

        function myFunctionFromVisualforce (event){
            console.log('This message is from visualforce function');
            console.log('Data which is coming from lightning component',event.getParam('data'));
            debugger;
        }
    </script>
</apex:page>

Lightning App Code:

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:LightningOutExample"/>
</aura:application>

Lightning component code:

<aura:component controller="LightningOutExampleController">
    <aura:attribute name="contacts" type="Contact[]" default="[]"></aura:attribute>

    <aura:handler name="init" value="{!this}" action="{!c.initialize}" />

    <aura:handler event="c:lightningAppEvent" action="{!c.lightningAppEventHandler}"/>

    <aura:registerEvent name="lightningAppExternalEvent" type="c:lightningAppExternalEvent" />

    <aura:iteration items="{!v.contacts}" var="contact">
        <h1>{!contact.Name}</h1>
    </aura:iteration> 
    <ui:button label="Call Visualforce code from Lightning" press="{!c.callExternalFunction}"/>

</aura:component>

Lightning Component Controller Code:

({
    initialize : function(component, event, helper) {
        var action = component.get("c.getContacts");
        var self = this;
        action.setCallback(this, function(a) {
            var contacts = a.getReturnValue();            
            component.set("v.contacts", contacts);             
            console.log('Contacts are loaded.');
        });
        $A.enqueueAction(action);
    },

    callExternalFunction : function(component, event, helper){
        console.log('Inside lightning controller function-->callExternalFunction');
        var lightningAppExternalEvent = $A.get("e.c:lightningAppExternalEvent");
        lightningAppExternalEvent.setParams({'data':component.get('v.contacts')});
        lightningAppExternalEvent.fire();
    },

    lightningAppEventHandler : function(component, event, helper){
        console.log('Inside lightning controller function-->lightningAppEventHandler');     
        console.log('Value of TestDataKey',event.getParam('data').TestDataKey);     
    }
})

Lightning Component Apex Controller Code:

public with sharing class LightningOutExampleController {
    public LightningOutExampleController() {

    }

    @AuraEnabled
    public static List<Contact> getContacts(){
        return [SELECT Id, Name From Contact ];
    }
}

This shows communication between lightning component and visualforce code. Here you can pass on data too. This opens up many possibilities in lightning + visualforce development.

Hope this answers your question.