How to pass attributes from aura component to lightning web component(lwc)

We can compose aura components and aura apps with a combination of lwc components and aura components. Frequently we need to pass attributes from aura component to lightning web component. Here we go through the an example of passing data from aura to lwc component

Explanation

Here we are creating an LWC component with name "childLWCComponent". We display data received from parent aura component "ParentAuraComponent" in "childLWCComponent". In order to make an lwc Javascript variable/attribute available for parent components to pass data, we need to add @api annotation before the variable. In order to pass data to "childLWCComponent" LWC component from parent aura component, you can just use the syntax <c:childLWCComponent childVariable="Value sent from parent"></c:childLWCComponent>

How to use

• Create an LWC component with name childLWCComponent
• Copy content from above code to childLWCComponent component. childLWCComponent.html is the HTML file and childLWCComponent.js is the Javascript file
• Create an aura component with name "ParentAuraComponent"
• Copy content from above code sample to ParentAuraComponent.cmp file
• You can embed the parent aura component in an aura app to see the result