[SalesForce] How to pass record id From VF page to Lightning component

VF Page:

<apex:page standardController="Opportunity" extensions="P2EcRequestType" lightningStylesheets="true" standardStylesheets="false" >
<apex:slds />
<apex:includeLightning />
<div id="lightning" />
<script>
function callApex(){
    callApexMethod();    
}
function lightning(){
    $Lightning.use("c:liu_NewRFIOnOpportunityApp", function() {
        $Lightning.createComponent("c:liu_NewRFIOnOpportunity",
                                   { recordId : '{!Opportunity.id}' },
                                   "lightning",
                                   function(cmp) {
                                   });
    });
}
</script>

<apex:sectionHeader title="Case" subtitle="RFI Type"/>

<style>
 body .bEditBlock .pbBottomButtons>table { padding-left : 227px; }
.bPageBlock.bEditBlock .pbBody .data2Col { padding-left : 650px;}
 .apexp .bPageBlock .pbBottomButtons .btn { margin-right : 40px; } 
</style> 
<apex:form id="form">
    <apex:actionFunction name='callApexMethod' action="{!Submit}" oncomplete="lightning();" />
    <apex:pageMessages ></apex:pageMessages> 
    <apex:pageBlock Title="Choose RFI Type and SubType" tabstyle="CostShare__c"> 
        <apex:pageBlockSection id="RFITypeSec">
            <apex:inputField value="{!RFICase.RFI_Type__c}"/>
            <apex:inputField value="{!RFICase.RFI_SubType__c}"/>
        </apex:pageBlockSection>    

        <apex:pageBlockButtons location="bottom" html-align="center">
            <apex:commandButton styleClass="slds-button slds-button_neutral" value="Submit" onclick="lightning(); return false;" rerender="form"/>   
            <apex:commandButton styleClass="slds-button slds-button_neutral" value="Cancel" action="{!cancel}"/>
            </apex:pageBlockButtons>        
    </apex:pageBlock>
</apex:form>

Component:

<aura:component controller="P2EcNewRFIonOpportunity" implements="lightning:actionOverride,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,force:hasSObjectName" access="global">

<aura:attribute name="recordId" type="Id" />
<aura:attribute name="access" type="string" />
<aura:attribute name="anlasis" type="string" />
<aura:attribute name="review" type="string" />
<aura:attribute name="Actual" type="string" />

<aura:attribute name="NewRFI" type="Case" default="{'sobjectType':'Case'}"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

controller:

({
doInit : function(component,event,helper){
    var recordId = component.get("v.recordId");        
    var action = component.get("c.newrfiopportunity"); 
    console.log('recordid####:'+recordId);
    action.setParams({
        "recordId":recordId
    });
    console.log('recordid1####:'+recordId);
    action.setCallback(this, function(response) {
        if (response.getState() ===  "SUCCESS") {  
            if(response.getReturnValue() != null ) {
                 var storeResponse = response.getReturnValue();
                helper.recordCreation(component,storeResponse);
            component.set("v.NewRFI", storeResponse);                 
            }     
        }
    });
    $A.enqueueAction(action);
}
})

Helper:

({
recordCreation : function(component,cse) {

    var windowHash = window.location.hash;
    var evt = $A.get("e.force:createRecord");
    console.log('evt%%%%'+evt);
    evt.setParams({
        'entityApiName':'Case',
        'defaultFieldValues': {
            'AccountId':cse.AccountId,
            'Related_Opportunity__c':cse.Related_Opportunity__c
        },
    });
    evt.fire();

  }
})

Apex controller of Component:

public class P2EcNewRFIonOpportunity {

 @AuraEnabled
public static Case newrfiopportunity(Id recordId){

    Opportunity Opprty = new Opportunity();     
    List<RecordType> lstRecType = new List<RecordType>();
    Map<String,Id> mapRecType = new Map<String,Id>();
    Case cse = new Case();


    String sObjectparentId = '';
    String CaseRecType = '';
    sObjectparentId = recordId;

    lstRecType = [SELECT Id,DeveloperName FROM RecordType WHERE sobjecttype = 'Case'];
    if(!lstRecType.isEmpty()){
        for(RecordType rec: lstRecType){
            mapRecType.put(rec.DeveloperName,rec.Id);   
        }
    }
    if(!String.isBlank(sObjectparentId)){
            Opprty = [select id, AccountId from opportunity where id=:sObjectparentId];
        }
       CaseRecType = 'RFI_Geo'; 
       cse.Related_Opportunity__c= Opprty.id;
       cse.AccountId = Opprty.AccountId;
       cse.RecordTypeId =mapRecType.get(CaseRecType); 

    return cse;
}

@AuraEnabled
public static Case saveCase(Case css){
    upsert css;
    return css;
    }

  }

In VF Page I am calling above lighting component when I click on the Submit Button. I have an input field(Picklist –access analysis review actual) on the same page.

the input field is RFICase.RFI_Type__c

Now I need to pass the Opportunity id to the lightning component and Picklist values also. Based on picklist values I need to populate the standard record creation page of the object with different record types from the lighting component.

I am not able to pass parameters at { recordId : '{!Opportunity.id}' }, in function lightning(){

Can anyone please help me how to pass values from VF Page to lightning component?

Error:

This page has an error. You might just need to refresh it. Error in 
$A.getCallback() [Cannot read property 'setParams' of undefined] 
Callback failed: apex://P2EcNewRFIonOpportunity/ACTION$newrfiopportunity 
Failing descriptor: {c:liu_NewRFIOnOpportunity}

enter image description here

Best Answer

I recommend to use the new Lightning Message Service (Beta as of Spring '20) as it's specially designed for that purpose.