Events for child to parent communication in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the child emits an event?

Consider a Vue 3 component where a child emits an event named update. What will the parent component do when it listens to this event?

Vue

<template>
  <ChildComponent @update="handleUpdate" />
</template>

<script setup>
function handleUpdate(payload) {
  console.log('Received:', payload)
}
</script>

A The child component automatically updates the parent's data without any function call.

B The parent runs the <code>handleUpdate</code> function with the event payload.

C Nothing happens unless the child modifies a prop directly.

D The parent component reloads the entire page.

💡 Hint

Think about how Vue handles custom events emitted by children.

When a child emits an event, the parent listens using @eventName and runs the assigned method with the payload.

📝 Syntax

intermediate

Identify the correct syntax to emit an event from a child component

Which of the following is the correct way to emit an event named save with a payload { id: 1 } inside a Vue 3 child component using defineEmits?

A const emit = defineEmits(['save']); emit('save', { id: 1 });

B this.$emit('save', { id: 1 });

C emitEvent('save', { id: 1 });

D defineEmits.emit('save', { id: 1 });

💡 Hint

In Vue 3 <script setup>, defineEmits returns a function to call.

defineEmits returns an emit function you call with the event name and payload.

🔧 Debug

advanced

Why does the parent not receive the event?

A child component emits an event change, but the parent does not respond. What is the most likely cause?

Vue

<!-- Parent.vue -->
<template>
  <ChildComponent @changed="onChange" />
</template>

<script setup>
function onChange() {
  console.log('Changed event received')
}
</script>

<!-- Child.vue -->
<script setup>
const emit = defineEmits(['change'])
function trigger() {
  emit('change')
}
</script>

A The parent method onChange is not defined properly.

B The child forgot to call the emit function.

C The parent listens to @changed but the child emits 'change' event; event names must match exactly.

D Vue does not support custom events between components.

💡 Hint

Check the event names in the parent and child components.

Event names are case-sensitive and must match exactly between emit and listener.

❓ state_output

advanced

What is the parent's data after child emits an event?

Given the following parent and child components, what will be the value of message in the parent after the child emits the event?

Vue

<!-- Parent.vue -->
<template>
  <ChildComponent @send-message="updateMessage" />
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
function updateMessage(text) {
  message.value = text
}
</script>

<!-- Child.vue -->
<script setup>
const emit = defineEmits(['send-message'])
emit('send-message', 'Hello from child')
</script>

A An error is thrown because emit is called outside a function

B '' (empty string)

C undefined

D 'Hello from child'

💡 Hint

The emit is called top-level during the child's setup phase.

Calling emit at the top level of the child's <script setup> executes during component setup, synchronously invoking the parent's updateMessage function and setting message to 'Hello from child'.

🧠 Conceptual

expert

Why use events for child to parent communication instead of props?

In Vue, why is emitting events from child to parent preferred over trying to modify parent props directly?

A Props are read-only in Vue; modifying them directly breaks the one-way data flow and causes errors.

B Events are faster than props for data transfer.

C Props cannot pass any data from parent to child.

D Vue automatically syncs props without events, so events are unnecessary.

💡 Hint

Think about Vue's data flow rules and how props are designed.

Vue enforces one-way data flow: props go from parent to child and are read-only. Children must emit events to request changes.