Events for child to parent communication in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to emit an event named 'update' from the child component.

Vue

<template>
  <button @click="$emit('[1]')">Click me</button>
</template>

Drag options to blanks, or click blank then click option'

Asubmit

Bclick

Cupdate

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong event name that the parent does not listen to.

Forgetting to put the event name as a string.

The $emit method sends an event named 'update' from the child to the parent.

2fill in blank

medium

Complete the parent template to listen for the 'update' event from the child component.

Vue

<template>
  <ChildComponent @[1]="handleUpdate" />
</template>

Drag options to blanks, or click blank then click option'

Aclick

Bupdate

Csubmit

Dchange

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different event name than what the child emits.

Forgetting the @ symbol before the event name.

The parent listens for the 'update' event emitted by the child using @update.

3fill in blank

hard

Fix the error in the child component to correctly emit the 'sendData' event with a payload.

Vue

<template>
  <button @click="$emit('[1]', message)">Send</button>
</template>

<script setup>
const message = 'Hello!'
</script>

Drag options to blanks, or click blank then click option'

AsendData

Bsenddata

Csend_data

Dsend-data

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or snake_case event names that don't match the listener.

Using hyphens in event names inconsistently.

Event names are case-sensitive. The correct event name is 'sendData' as emitted.

4fill in blank

hard

Fill both blanks to emit an event 'notify' with a payload 'info' from the child component.

Vue

<template>
  <button @click="$emit('[1]', [2])">Notify</button>
</template>

Drag options to blanks, or click blank then click option'

Anotify

Binfo

Cmessage

Dalert

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping event name and payload variable.

Using a payload variable that is not defined.

The child emits the 'notify' event with the payload variable 'info'.

5fill in blank

hard

Fill all three blanks to create a child component that emits 'changeColor' with a color payload, and the parent listens and handles it.

Vue

<!-- ChildComponent.vue -->
<template>
  <button @click="$emit('[1]', selectedColor)">Change Color</button>
</template>
<script setup>
const selectedColor = 'blue'
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @[2]="[3]" />
</template>

Drag options to blanks, or click blank then click option'

AchangeColor

Bchange-color

ChandleColorChange

DchangeColorHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase event name in the parent template instead of kebab-case.

Mismatching handler method name.

The child emits 'changeColor'. The parent listens with @change-color (kebab-case) and calls handleColorChange.