Events for child to parent communication in Vue - Step-by-Step Execution

Concept Flow - Events for child to parent communication

Child Component

↓

Parent Component

↓

Parent updates state or reacts

The child sends an event with data upward, and the parent listens and reacts to it.

Execution Sample

Vue

<template>
  <Child @notify="handleNotify" />
</template>
<script setup>
function handleNotify(message) {
  alert(message)
}
</script>

Parent listens to child's 'notify' event and shows an alert with the message.

Execution Table

Step	Action	Component	Event Emitted	Parent Listener	Parent Reaction
1	Child renders	Child	None	None	None
2	User clicks button in Child	Child	Emits 'notify' with 'Hello!'	Listens for 'notify'	Calls handleNotify('Hello!')
3	Parent handles event	Parent	None	Received 'notify'	Shows alert with 'Hello!'
4	Event cycle ends	Both	None	None	No further action

💡 Event emitted by child and handled by parent, communication complete.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
message	undefined	'Hello!'	'Hello!'	'Hello!'
parentState	initial	initial	updated if any	updated if any

Key Moments - 2 Insights

Why does the parent need to listen for the child's event?

Because the child emits an event, but the parent only reacts if it listens for that event, as shown in execution_table step 2 and 3.

Can the child directly change the parent's data?

No, the child cannot directly change parent's data; it must emit an event that the parent listens to and then updates its own data, as seen in the flow.

Visual Quiz - 3 Questions

Look at the execution table, what event does the child emit at step 2?

A 'update' with no data

B 'notify' with message 'Hello!'

C 'click' event

D No event emitted

💡 Hint

Check the 'Event Emitted' column at step 2 in the execution_table.

At which step does the parent call the handler function?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Parent Reaction' column in the execution_table.

If the parent does not listen for the child's event, what happens?

A Event is emitted but parent ignores it

B Child cannot emit events

C Parent still reacts automatically

D Child updates parent data directly

💡 Hint

Refer to the concept_flow and key_moments about event listening.

Concept Snapshot

Child emits event with data using $emit.
Parent listens with @eventName in template.
Parent handler receives data and updates state.
This enables child-to-parent communication.
Child cannot directly change parent data.
Events flow upward only.

Full Transcript

In Vue, child components communicate with parents by emitting events. The child uses $emit to send an event with optional data. The parent listens for this event using the @eventName syntax in its template. When the event occurs, the parent runs a handler function that can update its state or perform actions. This pattern keeps components decoupled and allows data to flow upward safely. The child cannot directly modify the parent's data; it must notify the parent through events. This example shows a child emitting a 'notify' event with a message, and the parent showing an alert when it receives it.

Practice

1. In Vue, how does a child component send a message to its parent component?

easy

A. By modifying the parent's data directly

B. By directly calling a parent method

C. By using v-bind to pass data upwards

D. By using $emit to trigger an event

Solution

1. Step 1: Understand child-to-parent communication

   In Vue, child components cannot directly change parent data or call parent methods without an event.

2. Step 2: Identify the correct Vue pattern

   The child uses $emit to send a custom event to the parent, which listens for it.

3. Final Answer:

   By using $emit to trigger an event -> Option D

4. Quick Check:

   Child sends event with $emit = C [OK]

Hint: Child uses $emit to send events up [OK]

Common Mistakes:

• Trying to modify parent data directly from child
• Using v-bind to send data upwards
• Calling parent methods directly from child

2. Which of the following is the correct syntax for a parent component to listen to a child's custom event named update?

easy

A. <Child @update='handleUpdate()' />

B. <Child @update='handleUpdate' />

C. <Child :update='handleUpdate' />

D. <Child v-on:update='handleUpdate()' />

Solution

1. Step 1: Recall Vue event listening syntax

   Vue uses @eventName or v-on:eventName to listen to events. The handler should be a method reference without parentheses.

2. Step 2: Identify correct syntax

   <Child @update='handleUpdate' /> uses @update='handleUpdate' correctly without calling the method immediately.

3. Final Answer:

   <Child @update='handleUpdate' /> -> Option B

4. Quick Check:

   Use @event='method' without () = D [OK]

Hint: Use @event='methodName' without parentheses [OK]

Common Mistakes:

• Adding parentheses to method in template
• Using :update which is for props, not events
• Using v-on with parentheses calling method immediately

3. Given this child component code:

export default {
  emits: ['send'],
  methods: {
    notify() {
      this.$emit('send', 'hello')
    }
  }
}

And parent template:

<Child @send='receiveMessage' />

What will happen when notify() is called in the child?

medium

A. Parent's receiveMessage method is called with argument 'hello'

B. Child emits event but parent does not receive it

C. An error occurs because 'send' is not declared in emits

D. Nothing happens because notify is not triggered

Solution

1. Step 1: Understand child emits event

   The child emits 'send' event with payload 'hello' when notify() is called.

2. Step 2: Parent listens and handles event

   The parent listens to 'send' event with @send='receiveMessage', so it calls receiveMessage('hello').

3. Final Answer:

   Parent's receiveMessage method is called with argument 'hello' -> Option A

4. Quick Check:

   Child $emit triggers parent handler with payload = A [OK]

Hint: Child $emit triggers parent's handler with payload [OK]

Common Mistakes:

• Thinking emits array is required to receive event
• Assuming parent won't get event without extra code
• Confusing event name or payload usage

4. Identify the error in this child component code snippet:

export default {
  methods: {
    sendData() {
      this.emit('update', 123)
    }
  }
}

medium

A. Event name 'update' must be declared in emits array

B. Cannot emit events from methods

C. Should use $emit instead of emit

D. Payload 123 must be a string

Solution

1. Step 1: Check method call syntax

   The Vue instance method to emit events is $emit, not emit.

2. Step 2: Confirm event declaration

   While declaring events in emits is recommended, not declaring does not cause this error.

3. Final Answer:

   Should use $emit instead of emit -> Option C

4. Quick Check:

   Use this.$emit to emit events = B [OK]

Hint: Always use this.$emit to send events [OK]

Common Mistakes:

• Forgetting the $ in $emit
• Thinking emits array is mandatory for emitting
• Assuming payload must be string

5. You want a child component to send two different events, save and cancel, each with a payload. How should you define and emit these events properly in Vue 3 Composition API <script setup>?

hard

A. const emit = defineEmits({ save: null, cancel: null })
function onSave() { emit('save', data) }
function onCancel() { emit('cancel', reason) }

B. defineEmits(['save', 'cancel'])
function onSave() { emit('save', data) }
function onCancel() { emit('cancel', reason) }

C. defineEmits(['save', 'cancel'])
const emit = defineEmits(['save', 'cancel'])
function onSave() { emit('save', data) }
function onCancel() { emit('cancel', reason) }

D. const emit = defineEmits(['save', 'cancel'])
function onSave() { this.$emit('save', data) }
function onCancel() { this.$emit('cancel', reason) }

Solution

1. Step 1: Understand defineEmits usage in <script setup>

   In Vue 3 Composition API with <script setup>, defineEmits returns an emit function. It can accept an object to define event names and validators or an array of event names.

2. Step 2: Identify correct syntax for multiple events

   const emit = defineEmits({ save: null, cancel: null }) function onSave() { emit('save', data) } function onCancel() { emit('cancel', reason) } uses defineEmits({ save: null, cancel: null }) which is valid and recommended for typing events. Then emits events with emit('save', data) and emit('cancel', reason).

3. Step 3: Check incorrect options

   defineEmits(['save', 'cancel']) function onSave() { emit('save', data) } function onCancel() { emit('cancel', reason) } calls defineEmits without assigning the result to emit, so emit is undefined. defineEmits(['save', 'cancel']) const emit = defineEmits(['save', 'cancel']) function onSave() { emit('save', data) } function onCancel() { emit('cancel', reason) } calls defineEmits twice which is invalid. const emit = defineEmits(['save', 'cancel']) function onSave() { this.$emit('save', data) } function onCancel() { this.$emit('cancel', reason) } uses this.$emit which is not available in <script setup>.

4. Final Answer:

   const emit = defineEmits({ save: null, cancel: null }) with emit calls -> Option A

5. Quick Check:

   Use defineEmits object + emit() in script setup = A [OK]

Hint: Use defineEmits object and emit() in script setup [OK]

Common Mistakes:

• Calling defineEmits without assigning to emit
• Calling defineEmits twice
• Using this.$emit inside script setup