Props drilling problem in Vue - Mini Project: Build & Apply

Understanding Props Drilling in Vue

📖 Scenario: You are building a simple Vue app that shows a user's name deep inside nested components. The name starts in the top-level component and must be passed down through several layers.This is like passing a message through a chain of friends until it reaches the last friend who shows it.

🎯 Goal: Build a Vue app with nested components where a userName string is passed down through props from the root component to the deepest child component and displayed there.

📋 What You'll Learn

Create a root component with a userName variable set to 'Alice'

Create three nested child components: ParentComponent, ChildComponent, and GrandchildComponent

Pass the userName prop from the root component to ParentComponent, then to ChildComponent, and finally to GrandchildComponent

Display the userName inside GrandchildComponent in a <p> tag

💡 Why This Matters

🌍 Real World

Props drilling is common when building Vue apps with nested components that need shared data. Understanding it helps you manage data flow clearly.

💼 Career

Many Vue developer jobs require knowledge of props and component communication. This project builds a foundation for managing component data.

1

Set up the root component with userName

Create a Vue root component with a userName variable set to the string 'Alice'. Use the setup function and ref to define userName.

Vue

import { ref } from 'vue'

export default {
  setup() {
    // Your code here
  }
}

Hint

Use const userName = ref('Alice') inside the setup function and return it.

2

Create ParentComponent and pass userName as a prop

Create a new component called ParentComponent that accepts a prop named userName. In the root component template, include <ParentComponent :userName="userName" /> to pass the prop down.

Vue

import { ref } from 'vue'
import ParentComponent from './ParentComponent.vue'

export default {
  components: { ParentComponent },
  setup() {
    const userName = ref('Alice')
    // Your code here
    return { userName }
  }
}

Hint

Import ParentComponent and add it to components. Use <ParentComponent :userName="userName" /> in the template.

3

Pass userName from ParentComponent to ChildComponent

In ParentComponent, accept the userName prop. Create a ChildComponent that also accepts userName as a prop. Pass userName from ParentComponent to ChildComponent using :userName="userName".

Vue

import { defineProps } from 'vue'
import ChildComponent from './ChildComponent.vue'

const props = defineProps({ userName: String })

// Your code here



  

Hint

Use defineProps to accept userName. Pass it down to ChildComponent with :userName="props.userName".

4

Pass userName to GrandchildComponent and display it

In ChildComponent, accept the userName prop. Create a GrandchildComponent that accepts userName as a prop. Pass userName from ChildComponent to GrandchildComponent. In GrandchildComponent, display the userName inside a <p> tag.

Vue

import { defineProps } from 'vue'
import GrandchildComponent from './GrandchildComponent.vue'

const props = defineProps({ userName: String })

// Your code here



  

Hint

Pass userName down to GrandchildComponent and show it inside a <p> tag using {{ props.userName }}.

Practice

1. What is props drilling in Vue?

easy

A. Using Vuex store to manage state globally

B. Passing props through many nested components to reach a child

C. Directly modifying props inside a child component

D. Using props only in the root component

Solution

1. Step 1: Understand props usage in Vue

   Props are used to pass data from parent to child components.

2. Step 2: Define props drilling

   Props drilling happens when you pass props through many layers of components just to reach a deeply nested child.

3. Final Answer:

   Passing props through many nested components to reach a child -> Option B

4. Quick Check:

   Props drilling = Passing props through many layers [OK]

Hint: Props drilling means many layers pass props down [OK]

Common Mistakes:

• Thinking props drilling means using props only at root
• Confusing props drilling with modifying props in child
• Mixing props drilling with global state management

2. Which of the following is the correct way to pass a prop named title from a parent to a child component in Vue?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize Vue prop binding syntax

   Props can be passed using shorthand : or full v-bind: syntax.

2. Step 2: Compare options

   uses shorthand :, uses v-bind:. Both correctly bind the variable parentTitle as a prop.

3. Final Answer:

   Both A and C -> Option A

4. Quick Check:

   Use : or v-bind: for dynamic props [OK]

Hint: Use : or v-bind: to pass dynamic props [OK]

Common Mistakes:

• Passing prop as plain string without binding
• Confusing attribute with prop binding
• Using incorrect syntax like

3. Given this component structure:
App -> Parent -> Child
and App passes a prop message to Parent, which passes it to Child. What will Child display if message is "Hello"?

<template>
  <div>{{ message }}</div>
</template>

<script setup>
defineProps(['message'])
</script>

medium

A. Hello

B. undefined

C. Error: message not defined

D. Empty string

Solution

1. Step 1: Trace prop passing

   App passes message="Hello" to Parent, Parent passes it to Child as prop.

2. Step 2: Child uses message prop correctly

   Child receives message prop and displays it inside the div.

3. Final Answer:

   Hello -> Option A

4. Quick Check:

   Prop passed down correctly = Hello [OK]

Hint: If prop passed correctly, child shows its value [OK]

Common Mistakes:

• Forgetting to pass prop from Parent to Child
• Not defining props in Child component
• Expecting prop to be reactive without passing

4. In a Vue app, you pass a prop user from App to Parent and then to Child. You get an error: Property 'user' is not defined in Child. What is the likely cause?

medium

A. All of the above

B. Parent component did not pass user prop to Child

C. Child component did not declare user in defineProps

D. App did not pass user prop to Parent

Solution

1. Step 1: Analyze the error message

   The error Property 'user' is not defined occurs when accessing a prop in the template without declaring it in defineProps in the Child.

2. Step 2: Distinguish from other issues

   If declared but not passed from Parent or App, the prop would be undefined, not trigger this specific error.

3. Final Answer:

   Child component did not declare user in defineProps -> Option C

4. Quick Check:

   'Property not defined' = missing defineProps declaration [OK]

Hint: 'Property not defined' means missing defineProps in child [OK]

Common Mistakes:

• Assuming props auto-pass without explicit binding
• Not declaring props in child component
• Ignoring error messages about undefined props

5. You want to avoid props drilling for a deeply nested component needing user data. Which Vue feature helps reduce props drilling?

hard

A. Using multiple emits to send data back up

B. Passing props through every intermediate component

C. Using local component state only

D. Using provide/inject to share data between ancestor and descendant

Solution

1. Step 1: Understand props drilling problem

   Passing props through many layers is tedious and hard to maintain.

2. Step 2: Identify Vue feature to avoid drilling

   Vue's provide/inject allows ancestor components to share data directly with descendants without passing props through every layer.

3. Final Answer:

   Using provide/inject to share data between ancestor and descendant -> Option D

4. Quick Check:

   Provide/inject reduces props drilling [OK]

Hint: Use provide/inject to skip intermediate props [OK]

Common Mistakes:

• Thinking local state shares data globally
• Using emits to send data down instead of up
• Passing props through every layer instead of provide/inject