Props for parent to child data in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in Vue?

Props are custom attributes that allow a parent component to pass data down to a child component in Vue.

beginner

How do you declare props in a Vue 3 component using the Composition API?

You declare props by defining a <code>props</code> option in the <code>&lt;script setup&gt;</code> block, for example: <pre>const props = defineProps({ title: String })</pre>

intermediate

Why should props be treated as read-only inside child components?

Props are read-only to keep data flow predictable and avoid side effects. Changing props inside a child can cause bugs and breaks Vue's one-way data flow.

beginner

How can you pass a string and a number from a parent to a child component using props?

In the parent template, use:

<ChildComponent title="Hello" count="5" />

For numbers, use binding:

<ChildComponent :count="5" />

intermediate

What happens if a required prop is not passed to a child component in Vue?

Vue will warn in the console during development that a required prop is missing, helping catch errors early.

How do you pass data from a parent to a child component in Vue?

A Using slots

B Using events

C Using props

D Using watchers

Props are the way to send data from parent to child components in Vue.

In Vue 3 with <script setup>, how do you declare props?

A Using computed()

B Using defineProps()

C Using data()

D Using methods()

The defineProps() function declares props in the <script setup> block.

What is the correct way to pass a number prop named 'age' with value 30?

A <code>&lt;Child :age="30" /&gt;</code>

B <code>&lt;Child age="30" /&gt;</code>

C <code>&lt;Child :age="'30'" /&gt;</code>

D <code>&lt;Child age=30 /&gt;</code>

Using the colon (:) binds the number 30 as a number, not a string.

Can a child component modify the value of a prop it receives?

A Only if using v-model

B Yes, props can be changed freely

C Only if the prop is marked writable

D No, props are read-only inside the child

Props should be treated as read-only to maintain one-way data flow.

What will Vue do if a required prop is missing in development mode?

A Show a console warning

B Throw a runtime error

C Ignore silently

D Automatically assign a default value

Vue warns in the console to help developers catch missing required props.

Explain how props work in Vue to pass data from a parent to a child component.

Think about how a parent shares information with a child.

Describe how to declare and use props in a Vue 3 component using the <script setup> syntax.

Focus on the Composition API style.

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