Props for parent to child data in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be displayed by the child component?

Given the parent passes a prop message to the child, what will the child render?

Vue

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'
const parentMessage = ref('Hello from parent')
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
const props = defineProps({
  message: String
})
</script>

A The child displays nothing because props are not reactive

B The child displays: {{ message }}

C The child displays: Hello from parent

D The child throws an error because message is not defined

💡 Hint

Remember that props passed from parent to child are reactive and accessible in the child template.

The parent passes parentMessage as a prop named message. The child receives it via defineProps and renders it inside a paragraph. So the output is the string value.

📝 Syntax

intermediate

Which option correctly defines a required string prop in Vue 3?

You want to define a prop named title that must be a string and is required. Which code snippet is correct?

A const props = defineProps({ title: { type: String, required: true } })

B const props = defineProps({ title: { type: String, isRequired: true } })

C const props = defineProps({ title: { type: 'string', required: true } })

D const props = defineProps({ title: String, required: true })

💡 Hint

Check the correct syntax for prop validation in Vue 3's defineProps.

In Vue 3, to define a required prop with a type, you use an object with type and required keys. The type must be the constructor (e.g., String), not a string.

❓ state_output

advanced

What is the output when the parent updates the prop?

If the parent changes the prop value after initial render, what will the child display?

Vue

<template>
  <ChildComponent :count="count" />
  <button @click="count++">Increment</button>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const count = ref(0)
</script>

<!-- ChildComponent.vue -->
<template>
  <p>Count is: {{ count }}</p>
</template>

<script setup>
const props = defineProps({ count: Number })
</script>

A The child throws an error because props cannot change

B The child shows the initial count value and does not update

C The child shows undefined because count is not reactive

D The child updates and shows the new count value each time the button is clicked

💡 Hint

Props are reactive in Vue and update the child when the parent changes them.

Props in Vue are reactive. When the parent updates count, the child receives the new value and re-renders accordingly.

🔧 Debug

advanced

Why does this child component fail to receive the prop?

The parent passes userName as a prop, but the child shows an empty string. What is the problem?

Vue

<!-- Parent.vue -->
<template>
  <ChildComponent user-name="Alice" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

<!-- ChildComponent.vue -->
<template>
  <p>User: {{ userName }}</p>
</template>

<script setup>
const props = defineProps({ userName: String })
</script>

A The parent should bind the prop with a colon like <code>:userName="'Alice'"</code>

B The child forgot to import the prop

C The child must use <code>props.userName</code> instead of just <code>userName</code>

D The parent uses kebab-case <code>user-name</code> but the child expects camelCase <code>userName</code> prop

💡 Hint

Check how static string props are passed in Vue templates.

Without the colon, user-name="Alice" passes the literal string 'Alice' as a string attribute, but Vue treats it as a plain HTML attribute, not a prop. Using :userName="'Alice'" binds the string as a prop properly.

🧠 Conceptual

expert

What happens if a child tries to mutate a prop directly?

In Vue 3, if a child component tries to change a prop value directly, what will happen?

Vue

<template>
  <p>{{ count }}</p>
  <button @click="count++">Increase</button>
</template>

<script setup>
const props = defineProps({ count: Number })
</script>

A The prop value changes and updates the parent automatically

B Vue will warn in the console and the prop value will not change

C The app crashes with a runtime error

D The prop value changes locally but does not update the parent

💡 Hint

Props are meant to be read-only inside child components.

Vue treats props as read-only inside child components. Mutating them directly triggers a warning and does not change the prop value.

Practice

1. What is the main purpose of props in Vue components?

easy

A. To pass data from a parent component to a child component

B. To store local state inside a component

C. To handle user input events

D. To define methods inside a component

Solution

1. Step 1: Understand the role of props

   Props are designed to send data from a parent component down to its child components.

2. Step 2: Differentiate props from other features

   Local state stores data inside a component, events handle user actions, and methods define functions. Only props pass data downward.

3. Final Answer:

   To pass data from a parent component to a child component -> Option A

4. Quick Check:

   Props = Parent to Child Data [OK]

Hint: Props always send data from parent to child [OK]

Common Mistakes:

• Confusing props with local state
• Thinking props handle events
• Assuming props define methods

2. Which of the following is the correct way to declare a prop named title in a Vue 3 child component using <script setup>?

easy

A. const props = defineProps({ title: String })

B. props: ['title']

C. export default { props: ['title'] }

D. const title = ref('')

Solution

1. Step 1: Identify Vue 3 <script setup> syntax

   In Vue 3 with <script setup>, props are declared using defineProps().

2. Step 2: Match the correct syntax for prop declaration

   const props = defineProps({ title: String }) correctly declares a prop named title of type String.

3. Final Answer:

   const props = defineProps({ title: String }) -> Option A

4. Quick Check:

   Vue 3 <script setup> uses defineProps() [OK]

Hint: Use defineProps() inside

Common Mistakes:

• Using options API syntax inside
• Declaring props as local refs
• Forgetting to use defineProps() in

3. Given the parent component template:

<ChildComponent :message="'Hello Vue'" />

And the child component script setup:

const props = defineProps({ message: String })
console.log(props.message)

What will be logged to the console?

medium

A. undefined

B. 'Hello Vue'

C. An error because props.message is read-only

D. null

Solution

1. Step 1: Understand prop passing

   The parent passes the string 'Hello Vue' as the message prop to the child.

2. Step 2: Accessing the prop in child

   The child uses defineProps to declare message and logs props.message, which holds 'Hello Vue'.

3. Final Answer:

   'Hello Vue' -> Option B

4. Quick Check:

   Passed prop value logs correctly [OK]

Hint: Props hold passed values, accessible via props object [OK]

Common Mistakes:

• Expecting props to be undefined without declaration
• Confusing read-only with inaccessible
• Assuming props are null if not reactive

4. What is wrong with this child component code that tries to modify a prop?

<script setup>
const props = defineProps({ count: Number })
props.count = props.count + 1
</script>

medium

A. Props must be declared as reactive refs to modify

B. The prop type Number is invalid in defineProps

C. Missing import of defineProps

D. Props are read-only and cannot be assigned new values

Solution

1. Step 1: Recall prop immutability

   Props in Vue are read-only inside child components and cannot be directly modified.

2. Step 2: Identify the error in code

   The code tries to assign a new value to props.count, which violates the read-only rule and causes an error.

3. Final Answer:

   Props are read-only and cannot be assigned new values -> Option D

4. Quick Check:

   Props cannot be changed inside child [OK]

Hint: Never assign new values to props inside child [OK]

Common Mistakes:

• Trying to mutate props directly
• Confusing props with reactive state
• Ignoring Vue warnings about prop mutation

5. You want to pass a list of user names from a parent to a child component and display them. Which approach correctly passes and uses the prop in the child component using Vue 3 <script setup>?

Parent template:

<UserList :users="['Alice', 'Bob', 'Charlie']" />

Choose the correct child component code:

hard

A. <script setup>
export default {
props: ['users']
}
</script>
<template>
<ul>
<li v-for="user in users" :key="user">{{ user }}</li>
</ul>
</template>

B. <script setup>
const users = ref([])
</script>
<template>
<ul>
<li v-for="user in users" :key="user">{{ user }}</li>
</ul>
</template>

C. <script setup>
const props = defineProps({ users: Array })
</script>
<template>
<ul>
<li v-for="user in props.users" :key="user">{{ user }}</li>
</ul>
</template>

D. <script setup>
const props = defineProps({ users: String })
</script>
<template>
<ul>
<li v-for="user in props.users" :key="user">{{ user }}</li>
</ul>
</template>

Solution

1. Step 1: Check prop declaration type

   The parent passes an array, so the child must declare users as type Array using defineProps({ users: Array }).

2. Step 2: Verify template usage

   The child uses v-for to loop over props.users and display each user in a list item, which is correct.

3. Final Answer:

   The code using defineProps({ users: Array }) and v-for on props.users -> Option C

4. Quick Check:

   Array prop with defineProps and v-for works [OK]

Hint: Match prop type to passed data and loop in template [OK]

Common Mistakes:

• Declaring wrong prop type (e.g., String instead of Array)
• Not using defineProps in
• Trying to mutate props inside child