Events for child to parent communication in Vue - Performance & Optimization

Performance: Events for child to parent communication

MEDIUM IMPACT

This concept affects interaction responsiveness and rendering updates when child components notify parents.

Child component sends data or signals to parent component

Vue

<ChildComponent @customEvent="handleEvent" />
// Inside ChildComponent
this.$emit('customEvent', data)

// Parent method updates only necessary reactive state

Parent updates minimal reactive state scoped to event, reducing reflows and repaints.

📈 Performance GainSingle reflow and repaint per event, improving interaction responsiveness (INP).

Child component sends data or signals to parent component

Vue

<ChildComponent @customEvent="parentMethod" />
// Inside ChildComponent
this.$emit('customEvent', data)

// Parent method triggers heavy state changes or multiple DOM updates unnecessarily

Parent reacts to event by updating many unrelated reactive properties causing multiple reflows and repaints.

📉 Performance CostTriggers multiple reflows and repaints per event, increasing INP and slowing responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Parent updates many reactive states on child event	High (many nodes affected)	Multiple reflows	High paint cost	[X] Bad
Parent updates minimal reactive state on child event	Low (few nodes affected)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

When a child emits an event, Vue triggers the parent's event handler which updates reactive state. This causes Style Calculation, Layout, and Paint stages to run if DOM changes occur.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to unnecessary or large DOM updates triggered by event handlers.

Core Web Vital Affected

INP

This concept affects interaction responsiveness and rendering updates when child components notify parents.

Optimization Tips

1Use Vue's $emit to send events from child to parent efficiently.

2Update only the reactive state needed in parent event handlers to minimize reflows.

3Avoid heavy DOM updates triggered by child events to keep interactions responsive.

Performance Quiz - 3 Questions

What is the main performance risk when a parent component updates many reactive properties on a child event?

A Multiple reflows and repaints slowing interaction responsiveness

B Increased bundle size due to event listeners

C Slower initial page load (LCP)

D Visual layout shifts (CLS)

DevTools: Performance

How to check: Record a performance profile while interacting with the child component event. Look for long tasks or multiple layout and paint events triggered by the parent's event handler.

What to look for: Check for multiple Layout and Paint events after the child event. Fewer and shorter events indicate better performance.