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
  }
}

Need a 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 }
  }
}

Need a 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



  

Need a 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



  

Need a hint?

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