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.
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.
Next part will be to add a new component. You can add this code underneath the media component inside the <script> tag.
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.
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.
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 email@example.com.