Props for parent to child data in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named message from the parent to the child component.

Vue

<template>
  <ChildComponent [1]="'Hello!'" />
</template>

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

Av-if

Bv-model

Cv-for

Dv-bind:message

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-model instead of v-bind for props.

Trying to use v-for or v-if to pass data.

Use v-bind:message or shorthand :message to pass props from parent to child.

2fill in blank

medium

Complete the child component code to declare a prop named title.

Vue

<script setup>
const props = defineProps({
  [1]: String
})
</script>

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

Atitle

Bmessage

Ccontent

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than the parent passes.

Not declaring props at all in the child component.

Props are declared in the child component using defineProps with the prop name and type.

3fill in blank

hard

Fix the error in the child component to correctly display the prop subtitle inside the template.

Vue

<template>
  <h2>{{ [1] }}</h2>
</template>

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

Aprops.subtitle

Bsubtitle

Cthis.subtitle

Dthis.props.subtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using props.subtitle or this.subtitle in the template.

Trying to access props with this.props.

In <script setup>, props are accessed directly by their name in the template, without props. or this..

4fill in blank

hard

Fill both blanks to pass a prop named count with value 5 and declare it in the child component.

Vue

<template>
  <Counter [1]="5" />
</template>

<script setup>
const props = defineProps({
  [2]: Number
})
</script>

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

Av-bind:count

Bcount

Cvalue

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using different prop names in parent and child.

Not declaring the prop type correctly.

Use v-bind:count to pass the prop and declare count as a Number in defineProps.

5fill in blank

hard

Fill all three blanks to pass a prop userName, declare it, and display it inside the child template.

Vue

<template>
  <UserCard [1]="'Alice'" />
</template>

<script setup>
const props = defineProps({
  [2]: String
})
</script>

<template>
  <p>Hello, {{ [3] }}!</p>
</template>

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

Av-bind:userName

BuserName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the prop in parent, child declaration, or template.

Trying to access props with props.userName in the template.

Pass the prop with v-bind:userName, declare userName in defineProps, and use userName in the template.