Child to Parent Communication in LWC Using Custom Events (Complete Beginner Guide)

Child to Parent Communication in Salesforce LWC Using Custom Events

1. What is Child → Parent Communication?

Child → Parent communication means the child component sends a message to the parent component.

Think like this:

• 👨 Parent = Boss
• 👦 Child = Kid

The child cannot change the boss’s data. The child can only inform the parent.

• Child speaks
• Parent listens

2. Why Can’t Child Directly Change Parent Data?

• Child does not know who the parent is
• Child cannot directly access parent variables
• This keeps components clean, secure, and reusable

Salesforce rule: child must use events.

3. How Does Child Talk to Parent?

By using Custom Events.

1. Child creates an event
2. Child dispatches the event
3. Parent listens to the event
4. Parent receives the message

4. Basic Flow (Very Easy)

Child
  |
  | sends event
  v
Parent

5. Important Rules (Read This First)

• Child cannot call parent methods
• Child never changes parent data
• Events always move upward
• Event names must be lowercase
• Data is always sent using event.detail
• Parent listens using on + eventname

6. The Most Important Line (Core Syntax)

this.dispatchEvent(
  new CustomEvent('sendmessage', {
    detail: 'Hello Parent'
  })
);

7. What is dispatchEvent?

dispatchEvent sends the event outside the child component.

Think of it like:

• Shouting
• Ringing a bell
• Calling someone

Without dispatchEvent, the parent hears nothing.

8. What is CustomEvent?

CustomEvent is an event that you create yourself.

You control:

• Event name
• Data to send

9. What is sendmessage?

sendmessage is the event name.

• Must be lowercase
• Defined only in the child
• Parent must listen using the same name

10. What is detail?

detail is the message container.

detail: 'Hello Parent'
detail: 5
detail: { name: 'Tom' }
detail: [1, 2, 3]

Parent reads it using:

event.detail

11. What is onsendmessage?

<c-child-component onsendmessage={handleMessage}>
</c-child-component>

• sendmessage → event name
• on + sendmessage → listener
• handleMessage → parent method

12. Parent Handler Method

handleMessage(event) {
  this.messageFromChild = event.detail;
}

13. Complete Simple Example

Child JavaScript

sendToParent() {
  this.dispatchEvent(
    new CustomEvent('sendmessage', {
      detail: 'Hi Parent'
    })
  );
}

Child HTML

<lightning-button
  label="Send"
  onclick={sendToParent}>
</lightning-button>

Parent HTML

<c-child-component onsendmessage={handleMessage}>
</c-child-component>

<p>{messageFromChild}</p>

Parent JavaScript

handleMessage(event) {
  this.messageFromChild = event.detail;
}

14. Output

Hi Parent

15. What is bubbles?

bubbles decides whether the event can move upward to more parents.

bubbles: true

bubbles = go up

16. What is composed?

composed decides whether the event can cross the component boundary.

composed: true

composed = go out

17. Best Practice: bubbles + composed

this.dispatchEvent(
  new CustomEvent('sendmessage', {
    detail: 'Hello Parent',
    bubbles: true,
    composed: true
  })
);

18. When Do You Need bubbles and composed?

• Deep child components
• Wrapper components
• Slots
• Non-direct parents

19. Common Mistakes

• Using @api for child to parent communication
• Using uppercase event names
• Forgetting event.detail
• Expecting two-way binding
• Missing composed: true

20. Comparison

Direction	Method
Parent → Child	@api
Child → Parent	Custom Event

21. One-Line Interview Answer

Child to parent communication in LWC is done using custom events where the child dispatches an event and the parent listens using on + event name.

22. Super Easy Memory Lines

• Child speaks, parent listens
• Events go up
• API goes down
• bubbles = go up
• composed = go out