How to do communication between Lightning web component?

Posted by Vinay Vernekar 27th December 2025

Introduction

In Lightning Web Components (LWC), components frequently need to exchange data and events. Choosing the right communication pattern improves performance, maintainability, and reusability. This article covers the main LWC communication techniques — parent-child, child-parent, sibling, and cross-namespace or cross-page communication — with code examples and best practices.

Parent to Child (property / @api)

Use public reactive properties on the child component (annotated with @api) to pass data from parent to child. This is the simplest and most common pattern for one-way data flow.

// parent.html

// parent.js
import { LightningElement, track } from 'lwc';
export default class Parent extends LightningElement {
@track parentMessage = 'Hello child';
}

// child.js
import { LightningElement, api } from 'lwc';
export default class Child extends LightningElement {
@api message; // receives value from parent
}

Child to Parent (Custom Events)

When a child needs to notify the parent, use custom events. The child dispatches an event; the parent listens and handles it.

// child.js
import { LightningElement } from 'lwc';
export default class Child extends LightningElement {
handleClick() {
const payload = { detail: { selectedId: 123 } };
const evt = new CustomEvent('itemselected', payload);
this.dispatchEvent(evt);
}
}

// parent.html

// parent.js
handleItemSelected(event) {
const id = event.detail.selectedId;
// handle the data
}

Sibling Components (same DOM) — PubSub Pattern

For sibling-to-sibling communication in the same Lightning page where components are not parent/child, you can use a lightweight pub-sub module (a simple event hub). Note: for modern apps, prefer Lightning Message Service (LMS) for cross-page or cross-namespace messaging.

// pubsub.js (simple event hub)
const callbacks = {};

const subscribe = (eventName, callback) => {
if (!callbacks[eventName]) callbacks[eventName] = [];
callbacks[eventName].push(callback);
};

const publish = (eventName, payload) => {
if (!callbacks[eventName]) return;
callbacks[eventName].forEach(cb => cb(payload));
};

export default {
subscribe,
publish
};

Lightning Message Service (LMS) — Recommended for Siblings, Cross-DOM, and Aura/LWC)

LMS is Salesforce’s recommended solution for communication across the DOM, between iframes, across Lightning pages, and between Aura and LWC. It uses message channels.

// publisher.js
import { LightningElement } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class Publisher extends LightningElement {
@wire(MessageContext)
messageContext;

sendMessage() {
const message = { recordId: '001xx000003NGsYAAW' };
publish(this.messageContext, SAMPLEMC, message);
}
}

// subscriber.js
import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class Subscriber extends LightningElement {
subscription = null;

@wire(MessageContext)
messageContext;

connectedCallback() {
if (!this.subscription) {
this.subscription = subscribe(this.messageContext, SAMPLEMC, (message) => {
// handle message
});
}
}
}

Other Patterns

– Query selectors: parent can use this.template.querySelector('c-child') to call public child methods.
– @api methods: expose imperative methods from child components for parent to call.
– Lightning Data Service / Apex: use shared data sources for persistence-based communication.

Best Practices

  • Prefer one-way data flow (parent -> child) and events (child -> parent) for clarity.
  • Use LMS for cross-DOM, cross-namespace, or Aura/LWC communication.
  • Keep events lightweight; avoid tightly coupling components.
  • Document message channels and event names to avoid collisions.
  • Use @api sparingly for public properties and methods; keep component contracts stable.

Conclusion

Choosing the right communication strategy for LWC depends on component relationship and scope: use @api for parent-child, custom events for child-to-parent, pubsub for simple sibling cases, and Lightning Message Service for robust cross-page or cross-framework messaging. These patterns will help you build scalable and maintainable Lightning applications.

Tags: