Compose Aura Components From Lightning Web Components 

You can compose Aura components from Lightning web components, but not the other way around. To communicate down the hierarchy, parents set properties on children.

In an Aura component, to refer to either Aura components or Lightning web components, use camel case with a colon separating the namespace and the component name.

Let’s understand this with the below example:

Create a component(LWC) named as greetingLwc with the following code:

import { LightningElement, api } from 'lwc';

export default class GreetingLwc extends LightningElement {
    @api message;
}

In the above code, we have created a public property using @api decorator which will be set by the enclosing aura component. To get familiarize yourself with decorators feel free to visit Decorators In LWC.

<template>
    <lightning-card>
        <p class="slds-p-horizontal_small">
            {message}
        </p>
    </lightning-card>
</template>

Now create an Aura component named as myAuraComponent and add the following code:

<aura:component implements="flexipage:availableForAllPageTypes">
    <c:greetingLwc message="Hey! Welcome to SalesforceBlue :)" />
</aura:component>	

Add the aura component myAuraComponent to a lightning page. You will see an output like the below:

Call a Child Lightning Web Component Method from a Parent Aura Component:

To call a method defined in a Lightning web component from an Aura component, give the Lightning web component an aura:id and use cmp.find(), just as you do to reference an Aura component.

For example, cmp.find(‘childLwc’).childLwcMethod().

Let’s update the components created above to understand this.

Update the code in the greetingLwc component as follows:

import { LightningElement, api } from 'lwc';

export default class GreetingLwc extends LightningElement {
    message;

    @api setGreetingMessage(message) {
        this.message = message;
    }
}

<template>
    <lightning-card title="LWC">
        <p class="slds-p-horizontal_small">
            {message}
        </p>
    </lightning-card>
</template>

Update the myAuraComponent as below:

<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:card title="AURA COMPONENT">
        <aura:set attribute="actions">
            <lightning:button variant="brand" label="Set Message On LWC" title="Set Message On LWC" onclick="{!c.buttonHandler}"/>
        </aura:set>
        <c:greetingLwc aura:id="myLwc" />
    </lightning:card>
</aura:component>	

({
    buttonHandler : function(component, event, helper) {
        var myLwc = component.find('myLwc');
        myLwc.setGreetingMessage('Hey! Welcome to SalesforceBlue :)');
    }
})

Update the lightning app page where you have added the myAuraComponent added earlier and you will get an output like the below:

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂