How to pass data from parent component to child using props in Vue

In this post, we will learn how to send data from the parent to the child component using props in Vue.

In Vue, sharing data between components is one of the core functions that it provides. And every component in vue has its own scope whether it be the child or the parent component.

This helps us to create a more modular form of application in Vue.

Since Vue applications are modular and can have nested components, we need to find a way to pass data between each component.

Let’s say we have a parent component with a child component nested within it. So how can we pass data from parent to child?

The answer is using props in Vue.

What are props in Vue ?

In Vue, props is a special keyword. It stands for properties. It is the simplest way to pass data between components.

Using props we can pass data from the parent down to its child component in Vue.

Note: props are used to send data one-way only i.e from parent to child. Not from child to parent.

To pass data from child to parent component read : How to pass data from child to parent component in Vue

To use props in Vue we have to do the following:

1. Register props inside the child component.
2. Passing data from the parent component using props

Let’s see with an example.

Sharing data from parent to child component using props

Let’s register props inside our child component (child.vue)

<template>
  <div class="child">
    {{ name }}
  </div>
</template>

<script>
export default {
  props: ["name"],
};
</script>

We have registered a prop called name in the parent component.

Next, we pass data from the parent component using this prop.

<template>
  <div id="app">
    <Child name="Johnny" />
  </div>
</template>

We can directly send prop like this or we can bind the data to the props from data property using v-bind or just the : (shortform).

Example:

<template>
  <div id="app">
    <Child :name="myName" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      myName: "Johnny",
    };
  },
};
</script>

Here, we have bind a data property to the prop using v-bind: or in short (:) to pass data to the child component.

We can also register our props in the component not just as an array but as an object too.

Using the object form, we can specify the type of the props that we are receiving from the parent.

If the type does not match, it will throw us an error.

For example, in child.vue component.

<template>
  <div class="child">
    {{ name }}
  </div>
</template>

script>
export default {
  props: {
    name: {
      type: String,
    },
  },
};
</script>

We can also a default value to our props too. So if no data is passed from the parent data, the default value will be used in the template. For example

props: {
    name: {
      type: String,
      default: "Robert",
    },
  },

Learn more about types of props and how to set default values depending on the type here : Different types of props and how to set default value of props in VueJS ?

Passing Function as props in Vue

We can also pass functions as props from parent to child in Vue.

First, register the props in our child and set the type to Function .

<template>
  <div class="child">
    <button @click="myfun()">Click</button>
  </div>
</template>

<script>
export default {
  props: {
    myfun: {
      type: Function,
    },
  },
};
</script>

We have a button that will trigger the function prop when clicked.

Now, we can import the component in the parent component and bind the method to the prop to pass it.

<template>
  <div id="app">
    <Child :myfun="myFunction" />
  </div>
</template>

<script>
export default {
  methods: {
    myFunction() {
      alert("This is a function");
    },
  },
};
</script>

Even though it works, it’s better to use $emit to execute a function instead of props. Learn more about it here: Execute a function from child component in Vue

So, these are some ways we can share data/information between the parent component and the child component using props in Vue.