Emitting custom events in Vue - Step-by-Step Execution

Concept Flow - Emitting custom events

Child Component Action

↓

Emit Custom Event

↓

Parent Listens to Event

↓

Parent Handles Event

↓

Update Parent State or Run Logic

The child component triggers an event, the parent listens and reacts, updating state or running code.

Execution Sample

Vue

/* Child.vue */
<script setup>
const emit = defineEmits(['notify'])
function sendNotification() {
  emit('notify', 'Hello from child')
}
</script>

<template>
  <button @click="sendNotification">Notify Parent</button>
</template>

Child component emits a 'notify' event with a message when button is clicked.

Execution Table

Step	Action	Event Emitted	Payload	Parent Reaction	Parent State Change
1	Child button clicked	notify	'Hello from child'	Parent method called	parentMessage updated
2	Parent updates message	none	none	UI shows new message	parentMessage = 'Hello from child'
3	No further events	none	none	No action	No change

💡 No more events emitted, parent state updated with child's message

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
parentMessage	''	''	'Hello from child'	'Hello from child'
eventEmitted	none	'notify'	none	none
payload	none	'Hello from child'	none	none

Key Moments - 2 Insights

Why does the parent update only after the child emits the event?

Because the parent listens for the custom event 'notify' and only runs its handler when that event is emitted, as shown in execution_table step 1.

What happens if the child emits an event with no listener in the parent?

The event is emitted but no parent reaction occurs, so no state changes happen. This is why the parent must explicitly listen for the event.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'parentMessage' after step 1?

A undefined

B 'Hello from child'

C '' (empty string)

D null

💡 Hint

Check variable_tracker column 'After Step 1' for 'parentMessage'

At which step does the parent update its state with the child's message?

A Step 1

B Step 2

C Step 3

D No update occurs

💡 Hint

See execution_table 'Parent State Change' column

If the child emitted an event named 'alert' instead of 'notify', what would happen given the current parent listener?

A Parent would ignore the event

B Parent would react normally

C Parent would throw an error

D Child would not emit the event

💡 Hint

Parent listens only to 'notify' event as per concept_flow and code sample

Concept Snapshot

Emitting custom events in Vue:
- Child uses defineEmits(['eventName']) to declare events
- Child calls emit('eventName', payload) to send event
- Parent listens with @eventName="handler"
- Parent handler runs when event fires, updating state or logic
- Enables child-to-parent communication cleanly

Full Transcript

In Vue, child components can send messages to their parents by emitting custom events. The child declares which events it can emit using defineEmits. When an action happens in the child, like a button click, it calls emit with the event name and optional data. The parent listens for this event using the @eventName syntax in the template. When the event fires, the parent's handler runs, often updating its state or running some logic. This flow allows the child to notify the parent without directly changing the parent's data, keeping components decoupled and easy to manage.

Practice

1. What does the $emit method do in a Vue child component?

easy

A. It registers a new component globally.

B. It updates the child component's data directly.

C. It changes the route in a Vue Router setup.

D. It sends a custom event to the parent component.

Solution

1. Step 1: Understand the role of $emit

   The $emit method is used inside a child component to send a message or event to its parent.

2. Step 2: Identify the effect of $emit

   It triggers a custom event that the parent can listen to and respond accordingly.

3. Final Answer:

   It sends a custom event to the parent component. -> Option D

4. Quick Check:

   $emit sends events to parent [OK]

Hint: Remember: child uses $emit to talk to parent [OK]

Common Mistakes:

• Thinking $emit changes child data directly
• Confusing $emit with global component registration
• Assuming $emit changes routes

2. Which of the following is the correct syntax to emit a custom event named update with a payload 42 inside a Vue component?

easy

A. this.$emit('update', 42)

B. emit.$('update', 42)

C. $emit('update', 42)

D. this.emit('update', 42)

Solution

1. Step 1: Recall Vue event emission syntax

   In Vue, to emit an event from a component, you use this.$emit(eventName, payload).

2. Step 2: Match the correct syntax

   this.$emit('update', 42) correctly uses this.$emit('update', 42), which is the proper method call.

3. Final Answer:

   this.$emit('update', 42) -> Option A

4. Quick Check:

   Use this.$emit to emit events [OK]

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

Common Mistakes:

• Omitting 'this' before $emit
• Using incorrect method names like emit or emit.$
• Calling $emit without this context

3. Given this child component code:

export default {
  methods: {
    sendAlert() {
      this.$emit('alert', 'Hello!')
    }
  }
}

And the parent template:

<ChildComponent @alert="showMessage" />

What happens when sendAlert() is called?

medium

A. The parent method showMessage is called with 'Hello!' as argument.

B. Nothing happens because the event name is incorrect.

C. An error occurs because $emit cannot send strings.

D. The child component updates its own data with 'Hello!'.

Solution

1. Step 1: Understand event emission and listening

   The child emits an event named 'alert' with the string 'Hello!'. The parent listens for 'alert' and calls showMessage.

2. Step 2: Trace the event flow

   When sendAlert() runs, the parent receives the event and calls showMessage('Hello!').

3. Final Answer:

   The parent method showMessage is called with 'Hello!' as argument. -> Option A

4. Quick Check:

   Child emits event, parent listens and reacts [OK]

Hint: Child emits event, parent listens with @event [OK]

Common Mistakes:

• Thinking event names must be different in child and parent
• Believing $emit cannot send string data
• Assuming child updates itself on emit

4. Identify the error in this Vue child component method:

methods: {
  notify() {
    $emit('notify')
  }
}

medium

A. Event name 'notify' is reserved and cannot be used.

B. Missing this before $emit causes a ReferenceError.

C. The method should return a value after emitting.

D. The methods object cannot contain functions.

Solution

1. Step 1: Check method syntax for emitting events

   In Vue, $emit must be called with this context inside methods.

2. Step 2: Identify the missing this

   The code calls $emit('notify') without this, causing a ReferenceError.

3. Final Answer:

   Missing this before $emit causes a ReferenceError. -> Option B

4. Quick Check:

   Always use this.$emit inside methods [OK]

Hint: Use this.$emit, not just $emit inside methods [OK]

Common Mistakes:

• Omitting this before $emit
• Thinking event names are restricted
• Expecting methods to return values after emit

5. You want a child component to emit an event change only when a new value is different from the old one. Which code correctly implements this logic inside the child?

hard

A. methods: {
updateValue(newVal) {
if (newVal == this.value) {
this.$emit('change', newVal)
}
}
}

B. methods: {
updateValue(newVal) {
this.$emit('change', newVal)
}
}

C. methods: {
updateValue(newVal) {
if (newVal !== this.value) {
this.$emit('change', newVal)
}
}
}

D. methods: {
updateValue(newVal) {
this.emit('change', newVal)
}
}

Solution

1. Step 1: Understand the condition for emitting

   The event should emit only if the new value differs from the current this.value.

2. Step 2: Check each option's logic

   The code that uses if (newVal !== this.value) { this.$emit('change', newVal) } correctly emits only on change. Code that emits unconditionally sends every time. Code using if (newVal == this.value) emits when values match (wrong logic). Code with this.emit uses invalid syntax.

3. Final Answer:

   methods: { updateValue(newVal) { if (newVal !== this.value) { this.$emit('change', newVal) } } } -> Option C

4. Quick Check:

   Emit only if newVal differs from current [OK]

Hint: Emit event only when new value differs [OK]

Common Mistakes:

• Emitting event unconditionally
• Using == instead of !== for change detection
• Calling this.emit instead of this.$emit