How to pass data from parent to child components in Vue.js?

To pass data from the parent component to the child component, Vue makes use of something called props. Props are custom attributes that can be declared on a component that enables one component to pass data to another. For example,

<employee-list name="Bob" department="Accounting"></employee-list>

Here, we have a employee-list component to which we are passing two props name with the value “Bob” and department property with the value “Accounting”.

Let’s look at props in more detail and how it is used to pass data from parent to child components.

We will begin by creating a Vue CLI application.

vue create parent-child-component

Once, the installation is complete, you can navigate to the folder and run the server to load the application.

$ cd parent-child-component
$ npm run serve

Next, we will create two files inside the src/components folder of the project.

touch src/components/ParentComponent.vue
touch src/components/ChildComponent.vue

For demonstration, we will call the child component from the ParentComponent.vue and also pass some data. Let’s go ahead and edit the ParentComponent.vue file.

// ParentComponent.vue

<template>
    <ChildComponent></ChildComponent>
</template>

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

    export default {
        name: "ParentComponent",
        components: {
            ChildComponent
        }
    }
</script>

In the template, we make use of the <ChildComponent> tag which gets imported from the ChildComponent.vue file using the below line of code.

import ChildComponent from "./ChildComponent.vue";

The ChildComponent.vue file is empty. Let’s add some code to it.

<template>
    <h2>Child Component</h2>
</template>

<script>
    export default {
        name: "ChildComponent"
    }
</script>

To be able to view the changes, we need to make changes in the App.vue file such that it includes the ParentComponent.vue. Let’s delete all the content from App.vue and write it as per our needs.

// App.vue

<template>
  <ParentComponent></ParentComponent>
</template>

<script>
import ParentComponent from './components/ParentComponent.vue'

export default {
  name: 'App',
  components: {
    ParentComponent
  }
}
</script>

Let’s open the link http://localhost:8080/

pass-data-parent-child-vue

So far, we haven’t passed any data from our parent component to the child component. Let’s pass some props in the ParentComponent.vue file.

<template>
    <ChildComponent first-name="Mickey" last-name="Mouse" ></ChildComponent>
</template>

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

    export default {
        name: "ParentComponent",
        components: {
            ChildComponent
        }
    }
</script>

Notice, we are passing two props to the ChildComponent - first-name and last-name.

In order to use these props in the ChildComponent.vue we need to declare them using the props keyword.

// ChildComponent.vue

export default {
  props: ["firstName", "lastName"],
  name: "ChildComponent",
};

The entire ChildComponent.vue file now looks like this.

<template>
    <h2>Child Component</h2>
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
</template>

<script>
    export default {
        props: ['firstName', 'lastName'],
        name: "ChildComponent"
    }
</script>

In the template of ChildComplate.vue we can directly reference firstName and lastName.

<template>
  <h2>Child Component</h2>
  <p>First name: {{ firstName }}</p>
  <p>Last name: {{ lastName }}</p>
</template>

pass-data-parent-child-vue-2

With this, we have successfully passed data from our parent component to the child component.

Note: You can also define the props as object where key is the name of the property and value is the type of data the prop will hold.

export default {
    props: {
        firstName: String,
        lastName: String
    },
    name: "ChildComponent"
}

Naming convention

Notice, we have made use of the kebab-case while passing the props to the child component.

<ChildComponent first-name="Mickey" last-name="Mouse"></ChildComponent>

And we have used camel case when declaring the props in the child component.

export default {
  props: ["firstName", "lastName"],
  name: "ChildComponent",
};

You can use camel case when passing the data instead of kebab-case.

<ChildComponent firstName="Mickey" lastName="Mouse"></ChildComponent>

However, kebab-case is the convention that is followed.

Naming convention#

Naming convention