How To Pass The Data Between The Components In VueJs

How to communicate between the components in Vue.

In this article, I would to explain to you how you can exchange data between the Vue components.

Where is the Parent and where is the Child

First of all, if you are new to frameworks and to web development in general, let’s understand where this family comes from.

The Parent is the component that serves as the whole page and the Children are the small components that are on this page.

For example, we have our landing page(Parent) and all the small components inside it, will be the Children components (articles, forms, buttons, etc).

👉 From Parent to Child

So how can we actually send our data from the Parent to the Child component?

For example, we have a page on which we get some data and on this page, we have different small components (list of friends, dates, etc).

// Parent component
<template>
 <div>
<ChildComponent1 :data="data" :id="admin.id"/>
<ChildComponent2 :items="data"/>
</div>
</template>
<script>
export default{
data() {
 return {
   data:[],
   admin:{} 
};
},
}
</script>

In the previous block of code, we got the exact answer on how actually we could send data from the Parent component to the Child. To be able to do that you have to use props.

In the Parent’s component, we have two kinds of data: “data” which is an array, and “admin” — an object.

In order to understand what kind of data(props) we passed to the Children components, let’s take a closer look at each of them.

:data=”data”
We would like to send the data with the same name that we are already using in Parent’s component.

:id=”admin.id”
We would like to send only an admin ID and to use the “id” name inside our Child component.

:items=”data”
We would like to send data and to use it under the name “items” inside the Child component.

How can we use this data in the Child Component?

// Child component
<template>
<div>
  <ul v-for="item in items" :key="item.id">
    <li> {{ item }} </li>
  </ul>
</div>
</template>
<script>
export default {
 props:{
  items: {
    type:Array
  }
}
}
</script>

As you can see, in order to use the data from the parents component you just have to declare it in props within the Child component.

❗️You don’t have to specify a type for a prop but it is highly recommended and even useful.

👉 From Child to Parent

In order to pass the data from the Child component to the Parent component, you will have to use the $emit and it is a completely different approach than props.

// Child component 
<template>
<div>
<ul v-for="item in items" :key="item.id">
<li @click="sendData(item)" > {{ item }} </li>
</ul>
</div>
</template>
<script>
export default {
data() {
  return: {
    items:[]
  }
}, 
methods:{
  sendData(item){
    this.$emit('nameInParent',item)
   }
}
}
</script>

In the example above, we would like to send some data from the list on click, and to do that, we are using an $emit in our method.

That means that we emit our item and we would like the Parent to receive that item by using the function call “nameInParent”.

Here is how it will look like in the Parent component.

// Parent component
<template>
 <div>
<ChildComponent1 @nameInParent="getData"/>
</div>
</template>
<script>
export default{
methods:{
  getData(data){
   console.log(data)
  }
}
}
</script>

In the Parent component, in order to get the information from the Child, instead of “click” we will have to use the name that we have sent in the $emit and to assign it to any other function’s name we would like to use in the Parent component.

This is pretty much it. I hope this article was useful for you. 😊