LWC Way to pass the data between component, Parent to Child, and Child to Parent component

Photo by Negative Space from Pexels

One of the keys to learning how Lightning Web Components work is to understand how components can communicate with each other. The communication patterns are different from Aura and are one of the culprits of Lightning Web Components' superb performance.

Follow some important consideration

• The character that separates the namespace from the component name must be a dash.
• The component name must be indicated in the kebab case. This means that if the component name is something like myCamelCaseName, the reference in the markup will be my-camel-case-name. This change has been done to follow web standards.
• The ending tag is compulsory, you cannot omit it.

We can Flow the data between components in Two way

1. Parent to Child (Passing Data Down)
2. Child to Parent (Passing Data Up)

Parent to Child

Public properties are properties annotated with the @api decorator. Decorators are not more than functions that are applied to other entities, as a property or a function, to add some additional capabilities. It is a pattern that can be implemented in multiple languages. In this case, the

Note: You can assign a default value to public property, but, you should never change the value of public property in the component itself. Remember the purpose of this property is to be the public API of the component, so, only the parent component should set or change its value.

ParentComponent.html
<template>
<c-child-l-w-c  datesend="Got parent value"></c-child-l-w-c>
</template>

datasend: This is public property. @api decorator is making the property available to be set via an attribute (same name) on component instantiation.

ChildLWC.js
import { LightningElement, api } from 'lwc';
export default class ChildLWC extends LightningElement {
@api datasend;
}
//--------Here you can access the data

Public methods are methods annotated with the @api decorator. Public methods are part of the public API of the component and can be called from a parent component, as they will be exposed as callable functions attached to the component DOM element API.

ChildComponent.js
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api
callchildmethod(param1) {
// Do whatever...
return 'Finished!';
}
}
ParentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
const returnValue = this.template.querySelector('c-child-component').callchildmethod('My param');
}

Child to Parent

Data must be passed up using Events. Events are just standard JavaScript events that we fire from the child component and listen to the parent.

Events are created using the Event or CustomEvent standard JavaScript classes. The only difference between them is that the CustomEvent class will allow you to store information in its detail property and thus transmit that information to the listeners of the event. Then, you can make an event target dispatch the created event invoking the dispatchEvent standard method.

ParentLWC.hml
<template>
<c-child-l-w-c onchild={haldleChild}></c-child-l-w-c>
</template>
ParentLWC.js
import { LightningElement } from 'lwc';
export default class ParentLWC extends LightningElement {
haldleChild(event){
console.log(event.detail.key1);
}
}
ChildLWC.html
<template>
<a onclick={clickbutton}>hello child</a>
</template>
ChildLWC.js
import { LightningElement, api } from 'lwc';
export default class ChildLWC extends LightningElement {
clickbutton(){
const event = new CustomEvent('child', {
// detail contains only primitives
detail: {key1:"ranbir",key2:"Das"}
});
this.dispatchEvent(event);
}
}