Communicate between parent and child components (Vuejs)

Communicate between parent and child components (Vuejs)

Table of contents

No heading

No headings in the article.

Photo by Liane Metzler on Unsplash

Hi dear developer,
You have just started learning vuejs and you want a quick and simple way to communicate between parent and child components so you are in the right place. In this short tutorial I'll walk you through how to:

Pass data from parent to child component:

To get started I have created vue app( you can find it here: codesandbox.io/s/communication-between-pare..). For now the project is empty: 1.png Now let's create two Parent and Child components in components folder and then import Parent component in App.vue as shown bellow: 2.png Cool! let's now create an input field, bind it to a variable called "messageFromParent" and pass it to Child component in a variable called "message" (ofcourse you need to import Child component): 3.png In order for Child component to be able to use the "message" variable, we need to pass it in an array called props and then use it as usual: 4.png Now if you write anything in the input field, it gets displayed in h1 tag present in Child component: 5.png

Pass data from child to parent component:

Congrats, you just learned how to pass data from Parent to Child what about the other way around?
To achieve the above goal, we need two things to be present in Parent component: a variable called "messageFromChild" and a method "getMessageFromChild" that sets "messageFromChild" to data coming from Child component. Second we need to pass "getMessageFromChild" method to Child component same as we did previously in part one: 6.png In Child component we create an input field, bind it to a variable called "messageFromChild" and handle any keypress by calling "getMessage" that takes "messageFromChild" as argument. Finally add "getMessage" to props: 7.png Hope you enjoyed it, if so please give it thumps up,
Also if you have any question, suggestion or improvement leave it in the comment and I'll get back to you

My social media accounts, feel free to connect to me on: