Vue.js Passing Data to Child Components with Props

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.

Components are used to build the combination of UI elements that need to be called any number of times. Some data might be component-specific. Those data need to be bound with a component on a repeated basis. This is when passing data through props to a component comes in handy. The Props are the attributes that is declared on a component. While passing the value to a prop attribute, it will become the property for that component.

Syntax:

<Child_component prop1 = data1  prop2 = data2 ></Child_component>

Approach: Here, we will create a Vue project, and then we will create a “To do list” web app. Tasks are passed as props. 

Creating Vue Project:

Step 1: To create a Vue app you need to install Vue modules using this npm command. You need to make sure you have the node installed previously.

npm install vue

Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.

npm install --global vue-cli

Step 3: Run the below command to create the project.

vue init webpack myproject

Step 4:  After creating your Vue project move into the folder to perform different operations.

cd myproject

Step to run the application: Open the terminal and type the following command.

npm run dev

Open your browser. Open a tab with localhost running (http://localhost:8080/) and you can see the output shown in the image.

Project Structure: After running the commands (mentioned in the above steps), if you open the project in an editor, you can see a similar project structure (as shown below).

Project Structure

Example: In this example, we are creating a to do list. To display the whole to do list, the tasks are passed as props to the task component.

App.vue:  This file is calling the task component 5 times to display the user to do list.

Javascript

<template>
  <center id="app">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2><u>To Do List</u></h2>
    <Task task="Run a mile" index="0" />
    <Task task="Code on GFG" index="1" />
    <Task task="Clean Room" index="2" />
    <Task task="Go to Swim" index="3" />
    <Task task="Buy Dog Food" index="4" />
  </center>
</template>

<script>
  import Task from "./components/Task";
  export default {
    name: "App",
    components: { Task },
  };
</script>

Task component: Create a new file Task.vue inside the components folder.

Task.vue: This is the component that is being called for 5 times to display the list.

Javascript

<template>
    <h3 style=
    "color: white;
    backgroundColor: green;
    width: 300px;
    height: 30px;
    padding: 15px;">
    {{index}} -    {{task}}
    </h3>
</template>

<script>
  export default {
    name: 'Task',
    props : ['task','index']
  }
</script>

Output:

Task components

Reference: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props