Types of Communication in LWC
Jan 7, 2022
3 types of Communication :
Parent to Child
Child to Parent
Unrelated
Parent to Child :
A. Pass Data to child — (On load)
Add @api to variable in child component.
B. Pass data to child — (Through Method)
Add @api to method in child component.
Use this syntax in parent -
this.template.querySelector(‘c-child comp’).childMethod(event.target.value);
Child to Parent :
1. Create & Dispatch ‘Custom Event’ in child component.
2. Catch the event in Parent, by appending ‘on’ before event name.
Unrelated Components :
1. Create a ‘Lightning Message Channel’ first.
2. Publish function in one LWC
3. Subscribe function in second LWC
