Sometimes we may ran into condition to use Lightning component in visualforce page where some of users still in classic and your lightning component doesnt work in classic
To use lightning component in visualforce page we need to use
apex:includeLightning ,Includes the Lightning Components for Visualforce JavaScript library, lightning.out.js, from the correct Salesforce domain
$Lightning.use() method in JavaScript is used to refer Lightning Application which extends ltng:outApp. $Lightning.createComponent is used to create Lightning Component dynamically.
Lets Take an Example , myFirstLightningComponent is a name of a lightning component
Step 1 : Create a Lightning Application ,we need to use access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.
<aura:application access="GLOBAL" extends="ltng:outApp" >
<c:myFirstLightningComponent />
</aura:application>Step 2: Create a Visualforce page which displays lightning Application ,we can pass variable from Visualforce page to lightning component too
<apex:page >
<apex:includeLightning />
<script>
$Lightning.use("c:myLightningApplication", function() {
$Lightning.createComponent("c:myFirstLightningComponent",
{
},
"variable",
function(cmp) {
});
});
</script>
</apex:page>