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.

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