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-html

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);   
   } 
}

Salesforcedrillerlwc-js

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-cmp

Salesforcedrilleraura.js

({
    handleChange: function(component, event) {
        
        component.set('v.message', event.getParam('key'));
    },
});

Salesforcedrilleraura-js

Output

Salesforcedrilleraura-output

Salesforce Menu

Salesforce Lightning

Salesforce LWC