Getting started with Vue.js - part eight - communication

Getting started with Vue.js - part eight - communication

Published 12. sep 2019 05:08 by Stein Ove Helset

In the last part of the course, we will learn how to communicate between components. How to pass data into a component, and how to send information back up to its parent again.

Communicating between components

The last part of this course is to make a component send data back to it's parent. We already now communicate to a child by sending information by binding the name to the name attributes which is shown inside a component using props.

There is a couple of ways to send information back to the parent and we are going to show you how to use the most common way using a emit signal.

Let's start by replacing the <div class="field is-grouped"> which holds the add interests form with this code.

Vue Hero - Introduction - Communication

Next part will be to add a new component. You can add this code underneath the media component inside the <script> tag.

Vue Hero - Introduction - Communication two

Since the new add-interest component will take care of the very simple validation we can now simplify the addInterest method in the parent component to look like this.

Vue Hero - Introduction - Validation

If you open index.html inside your browser now it should look like earlier, but the add interest form is now inside a separate component which sends data up to its parent.

Mini challenge

This challenge will be the biggest one so far. I want you to make the two input fields (name and description) into to separate components. Both of those two components should be able to pass data back up to it's parent and things should work the way they do now.


The course is finished and you should now have a basic understanding of how Vue works and you should be able to start building some small web apps for your self. I hope you've enjoyed the course and if there is anything you want to say, good or bad.
Just send me an email at

Share this post


Add comment