Sometimes, we want to pass data from parent to child component in Vue.js.

In this article, we’ll look at how to pass data from parent to child component in Vue.js.

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

To pass data from parent to child component in Vue.js, we can make our child component accept props from the parent.

For instance, in the child component, we write

<script>
//...

export default {
  name: "ProfileForm",
  //...
  props: ["user"],
  created() {
    console.log(this.user);
  },
  //...
};
</script>

to register the user prop with

props: ["user"]

Then in the parent component, we write

<template>
  <div class="container">
    <profile-form :user="user"></profile-form>
  </div>
</template>

to add the profile-form into the parent component and set the user prop to user to pass user down to profile-form with

:user="user"

Conclusion

To pass data from parent to child component in Vue.js, we can make our child component accept props from the parent.