Aura with LWC
There is two way to create the lightning component
- Aura component
- Lightning web component
Difference between LWC and Aura component
LWC | Aura |
---|---|
There is no need of good knowledge of salesforce architecture.it user the standar web tools like css,ECMA7 | Users must be familiar with the salesforce platform deeply. |
Merging with Aura is not possible | Merging LWC is possible |
LWC performance is faster | Compare to LWC it is Slow |
Lwc use standard DOM event | Aura uses the application and component event |
Nowadays every development is moving from aura component to lightning web component, so it is very important to embed the LWC in aura component.
Note: We can embed the LWC in aura component but vice versa is not possible.
How to Use LWC inside Aura
Let’s create the LWC
Salesforcedrillerlwc.html
<template> This is the LWC Button to pass data to Aura component <br/> <lightning-button variant="brand" label="Salesforce driller" title="Salesforce driller" onclick={handleClick} class="slds-m-left_x-small"></lightning-button> </template>
Salesforcedrillerlwc.js
import {LightningElement,wire, api} from 'lwc'; import {NavigationMixin} from 'lightning/navigation'; export default class salesforcedriller extends NavigationMixin(LightningElement) { handleClick(){ const eventfireonclick = new CustomEvent('fireevent', { detail: {key:'Hello Aura'} }); // Fire the custom event this.dispatchEvent(eventfireonclick); } }
Now it is time to create the aura component which will include the LWC.
Salesforcedrilleraura.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="message" type="String" default="Value will replace here"/> <lightning:card title="AuraDomEventListener" iconName="custom:custom30"> <aura:set attribute="actions"> <span class="aura">Aura Component</span> </aura:set> <div class="slds-m-around_medium"> <lightning:layout> <lightning:layoutItem size="4"> <!-- This is an LWC component --> <c:helloWorld onfireevent="{!c.handleChange}"/> </lightning:layoutItem> <lightning:layoutItem size="8" class="slds-p-left_medium"> {!v.message} </lightning:layoutItem> </lightning:layout> </div> </lightning:card> </aura:component>
Salesforcedrilleraura.js
({ handleChange: function(component, event) { component.set('v.message', event.getParam('key')); }, });
Output