Props for parent to child data in Vue

Introduction

Props let a parent component send information to its child component. This helps components share data easily.

You want to show a message from a parent component inside a child component.

You need to pass user details from a main page to a profile card component.

You want to customize a button's label from the parent component.

You want to reuse a component but with different data each time.

You want to control child component behavior based on parent data.

Syntax

Vue

<ChildComponent :propName="value" />

// Inside ChildComponent
props: {
  propName: Type
}

Use : or v-bind: to pass dynamic values.

Declare props in the child component to receive data.

Examples

Passing a simple string message from parent to child.

Vue

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

// ChildComponent
props: {
  message: String
}

Passing a number value as a prop.

Vue

<ChildComponent :count="5" />

// ChildComponent
props: {
  count: Number
}

Passing an object with user details.

Vue

<ChildComponent :user="userObject" />

// ChildComponent
props: {
  user: Object
}

Sample Program

The parent sends a greeting string to the child using a prop. The child shows this greeting inside a paragraph.

Vue

<template>
  <div>
    <ChildComponent :greeting="parentGreeting" />
  </div>
</template>

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

const parentGreeting = 'Hello from Parent!'
</script>


// ChildComponent.vue
<template>
  <p>{{ greeting }}</p>
</template>

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

Important Notes

Props are read-only inside the child component. Don't try to change them there.

Always declare the expected prop types for better code clarity and error checking.

Use kebab-case in templates for prop names with multiple words (e.g., my-prop), but camelCase in script.

Summary

Props pass data from parent to child components.

Declare props in the child to receive data.

Props are read-only inside the child component.

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