How to Send Data From Parent Component to Child Component in Vue.js

Introduction

In this article, I have explained how to send single-props from the parent component to the child component using Vue.js.

Open the Command prompt, Create a directory named "PropsDemo" then create a project using Vue CLI(Command Line Interface).

CLI command: vue create single-props

Choose "Manually select features". When we select this option, we can use the resources needed, like a router, vuex, etc.

parent component to child component in Vue.js

I have selected Babel and Router for my current application.

parent component to child component in Vue.js

I have chosen a version of Vue.js 2.x for my current application.

parent component to child component in Vue.js

Selected history mode for my routers as "n" defined as "no".

parent component to child component in Vue.js

I have chosen Babel and ESLint configuration files in my "package.json".

parent component to child component in Vue.js

Here I have selected "N" because I don't need to use this same configuration in my upcoming projects.

parent component to child component in Vue.js

Now the project has been created successfully. To move to the application path, execute the command "cd singleprops".

parent component to child component in Vue.js

To open the application in visual studio code, execute the command "code".

Open the "App.vue" file, then remove the default code that existed.

parent component to child component in Vue.js

Click the components folder, Create a new file child component named "Child.vue" including the heading element inside the <template> section, Added a <script> section declaring the name of the component like the below code snippet.

<template>
    <h1> 
       
    </h1>
</template>

<script>
export default{
    name:'Child',
   
}

</script>

<style scoped>

</style>

After that, we have to import the child component in the App.vue file component inside the <script></script> section,

Declared the component "name: 'Child' " inside the default export,

Add the <Child/> component to the <template> section.

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

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

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
</style>

Now, declare the variable named "title" to store the string value, then return the value.

data: function(){
      let title='My First Single Props'
      return{
        data:title
      }
    },

Pass the data as props value in the child component inside App.vue like below,

<template>
  <div id="app">
  <Child :data="data"/>
  </div>
</template>

Now, the App.vue full code like below,

<template>
  <div id="app">
    <Child :data="data" />
  </div>
</template>

<script>
import Child from './components/Child.vue';
export default {
  name: "App",
  components: { Child },
  data: function () {
    let title = 'My First Single Props'
    return {
      data: title
    }
  },

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now, open Child.vue component, then declare the props object variable data as String datatypeThenen bind the props as a binding element inside the heading element like below,

<template>
    <h1> 
        {{ data }}
    </h1>
</template>

<script>
export default{
    Name:'Child',
    props:{data:String} 
}
</script>

<style scoped>

</style>

Run the application using the "npm run serve" command.

parent component to child component in Vue.js