Pass data from one LWC component to another LWC component using @api decorator

 We have two LWC component parentLwcComponent and childLwcComponent, now we need to pass a data which user enter any value in parent component to child component.

parentLwcComponent.html

Here we are calling the child component on line 4 and using onchange event to get the value and assign to a @api decorator variable.

parentLwcComponent.js

Here using event.target method we are getting value from input element and assigning to @api decorator. because of reactive property of @api, when the value changes automatically the value is passed to the child component parameter.

childLwcComponent.cmp

Here itemOfChild property captures the value from parent.

childLwcComponent.html