Props for parent to child data in Vue - Mini Project: Build & Apply

Props for parent to child data

📖 Scenario: You are building a simple Vue app that shows a greeting message. The parent component holds the message text. The child component will receive this message as a prop and display it.

🎯 Goal: Create a parent component that passes a greeting message to a child component using props. The child component should display the message inside a paragraph.

📋 What You'll Learn

Create a parent component named ParentComponent with a data property greeting set to 'Hello from Parent!'.

Create a child component named ChildComponent that accepts a prop named message.

Use the ChildComponent inside ParentComponent and pass the greeting data as the message prop.

Display the message prop inside a <p> tag in ChildComponent.

💡 Why This Matters

🌍 Real World

Passing data from parent to child components is a common pattern in Vue apps to keep components reusable and organized.

💼 Career

Understanding props is essential for building interactive Vue applications and collaborating in frontend development teams.

1

Set up the parent component data

Create a Vue component named ParentComponent with a data function that returns an object containing a property greeting set to the string 'Hello from Parent!'.

Vue

export default {
  name: 'ParentComponent',
  // Your code here
}

Need a hint?

Remember, the data option in Vue components is a function that returns an object with your data properties.

2

Create the child component with a prop

Create a Vue component named ChildComponent that declares a prop named message.

Vue

export default {
  name: 'ParentComponent',
  data() {
    return {
      greeting: 'Hello from Parent!'
    };
  }
}

// Your code here to create ChildComponent with prop 'message'

Need a hint?

Use the props option to declare props in Vue components as an array of strings.

3

Use the child component in the parent and pass the prop

Inside ParentComponent, register ChildComponent in the components option. Then, in the template, use <ChildComponent :message="greeting" /> to pass the greeting data as the message prop.

Vue

  



export default {
  name: 'ParentComponent',
  data() {
    return {
      greeting: 'Hello from Parent!'
    };
  },
  components: {
    ChildComponent
  }
}

export const ChildComponent = {
  name: 'ChildComponent',
  props: ['message']
};

Need a hint?

Remember to register the child component in the components option and use the :message="greeting" binding in the template.

4

Display the prop message in the child component template

Add a template section to ChildComponent that displays the message prop inside a <p> tag.

Vue

  



export const ChildComponent = {
  name: 'ChildComponent',
  props: ['message'],
  // Your code here to add template
};

export default {
  name: 'ParentComponent',
  data() {
    return {
      greeting: 'Hello from Parent!'
    };
  },
  components: {
    ChildComponent
  }
};

Need a hint?

Use the template property in the child component object to define the HTML that uses the message prop.