Call Lightning Component method from Visualforce Page

Hello friends, today we are going to discuss Call Lightning Component method from Visualforce Page. Despite the differences between the two, it is possible to call a Lightning Component method from a Visualforce page. This can be useful if you have existing Visualforce pages that you want to enhance with Lightning Components or if you need to use a Lightning Component that is not available in Visualforce.

Also, check this: Call the Visualforce page method from Lightning

Key Highlights :

1. Use aura:method to call lightning controller methods from the Visualforce page.

Code :

First of all, we create a target aura component where we send the data.

SourceAura.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <!--Aura Method-->
    <aura:method name="getDataMethod" action="{!c.callFromVF}" access="global"> 
        <aura:attribute name="message" type="Object" /> 
        <aura:attribute name="name" type="String"/> 
    </aura:method>
    
    <!-- Attributes-->
    <aura:attribute name="msg" type="String"/>
    <aura:attribute name="from" type="String"/>
    <aura:attribute name="name" type="String"/>
    
    <div class="slds-m-around_x-large">
        Name : {!v.name} <br/>
        From : {!v.from} <br/>
        Message : {!v.msg} <br/>
    </div>
</aura:component>

SourceAuraController.JS:

({
    callFromVF : function(component, event, helper) {
        //Get Parameters
        var params = event.getParam('arguments');
        if (params) {
            //Get Welcome message parameter
            var msg = params.message.message;
            var from = params.message.from;
            //Get name parameter
            var name = params.name;
            component.set("v.msg", msg);
            component.set("v.from", from);
            component.set("v.name", name);
        }
    }
})

Now we create a Lightning out app so we can use this in VF page.

SourceAuraApp.app:

<aura:application extends="ltng:outApp" access="global">
	<aura:dependency resource="c:SourceAura"/>
</aura:application>

Here we create Visualforce page.

FromTargetVF.vfp:

<apex:page>
    <apex:includeLightning />
    <apex:slds />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer" />
    
    <script type="text/javascript">
        var component; //Variable for Lightning Out Component
        //Create Lightning Component
        $Lightning.use("c:SourceAuraApp", function() {
            $Lightning.createComponent("c:SourceAura", { },
                                       "LightningContainer",
                                       function(cmp) {
                                           component = cmp;
                                           console.log('Component Created Successfully');
                                       });
        });
        
        //Method to call Lightning Component Method
        function sendMessageToAura(){
          	let message = document.getElementById('messageId').value
            component.getDataMethod({message : message, from: "VF Page"}, "Techdicer");
        }
    </script>
    
    <apex:form id="form1">
        <div class="slds-p-around_medium">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-01">Message</label>
                <div class="slds-form-element__control">
                    <textarea id="messageId" placeholder="type message" class="slds-textarea"></textarea>
                </div>
            </div>
            <!--Button to call Javascript method-->
            <div class="slds-m-top_small slds-text-align_center">
                <button class="slds-button slds-button_brand" onclick="sendMessageToAura();return false;">Send Message To Aura</button>
            </div>
        </div>
    </apex:form>
</apex:page>

Output :

Reference :

1. aura:method