Emitting custom events in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Vue component emits a custom event?

Consider this Vue 3 component using the Composition API. What will be the output in the parent component when the button is clicked?

Vue

<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['update'])
function handleClick() {
  emit('update', 'Hello from child')
}
</script>
<template>
  <button @click="handleClick">Click me</button>
</template>

A The button click triggers a console log inside the child but no event is emitted.

B The component throws an error because defineEmits is not a function.

C Nothing happens because the event name 'update' is reserved and ignored.

D The parent receives the 'update' event with payload 'Hello from child' and can react accordingly.

💡 Hint

Think about how Vue components communicate upward using events.

Using defineEmits in Vue 3 Composition API allows the child to emit custom events. The parent can listen to these events and receive the payload.

📝 Syntax

intermediate

Which option correctly emits a custom event with multiple arguments in Vue 3?

Choose the correct syntax to emit a custom event named 'save' with two arguments: id and data.

A emit('save', [id, data])

B emit('save', { id, data })

C emit('save', id, data)

D emit('save', id + data)

💡 Hint

Vue emits can send multiple arguments separately.

The emit function accepts the event name followed by any number of arguments. These arguments are passed to the event listener in order.

🔧 Debug

advanced

Why does this Vue 3 component fail to emit the custom event?

Look at the code below. The parent never receives the 'submit' event. What is the cause?

Vue

<script setup>
const emit = defineEmits(['submit'])
function onSubmit() {
  emit('submit')
}
</script>
<template>
  <button @click="onSubmit">Submit</button>
</template>

A The component is missing the import statement for <code>defineEmits</code> from 'vue'.

B The event name 'submit' is reserved and cannot be emitted.

C The <code>emit</code> function is called outside the <code>setup</code> function.

D The button click handler is not correctly bound to the <code>onSubmit</code> function.

💡 Hint

Check if all Vue functions are properly imported.

In Vue 3 script setup, you must import defineEmits from 'vue' to use it. Without import, defineEmits is undefined, so emit is not set.

❓ state_output

advanced

What is the parent's state after receiving this emitted event?

A child component emits a 'change' event with a payload object { count: 5 }. The parent listens and updates its total state by adding count. What is the value of total after the event?

Vue

<template>
  <Child @change="handleChange" />
  <p>Total: {{ total }}</p>
</template>
<script setup>
import { ref } from 'vue'
const total = ref(0)
function handleChange(payload) {
  total.value += payload.count
}
</script>

A undefined

B 5

C NaN

D 0

💡 Hint

Think about how the reactive ref updates with the event payload.

The parent starts with total = 0. When the child emits { count: 5 }, the handler adds 5 to total.value. So the new total is 5.

🧠 Conceptual

expert

Why use custom events instead of props for child-to-parent communication in Vue?

Which reason best explains why emitting custom events is preferred over directly modifying parent props in Vue components?

A Props are read-only in Vue; emitting events respects one-way data flow and keeps components decoupled.

B Emitting events automatically updates the parent props without extra code.

C Props can only be strings, so events are needed for complex data.

D Custom events allow the child to access and modify the parent's internal state directly.

💡 Hint

Think about Vue's design principle for data flow between components.

Vue enforces one-way data flow: parents pass props down, children emit events up. Props are read-only to children to avoid unexpected side effects and keep components independent.