Vue.js Tutorial: Communication Between Components, Preview

Components, as the most powerful feature of Vue.js often needs to communicate between each other. Let me show an example of all 3 types of communication: parent -> child, child -> parent, child -> child.

Some technical information at the beginning:

  1. tutorial is written in Vue.js, version 2.2.1
  2. there is used ES6 multiline string feature with back-tick notation
  3. other code is either Vue or pure JavaScript
  4. examples will be available in JSFiddle to see it directly in action
  5. Twitter Bootstrap 4 is used to make app nicely styled
  6. if you use Vue CLI and single-file components, don’t worry, in the final, bonus part of the tutorial, you find rewritten app, downloadable source code attached, using webpack-simple template

What Is the App About?

Imagine school with 2 classes. You are the director, who decides which class is suitable for each student.

You will be able to:

  1. assign student to the classes
  2. switch student from one class to another
  3. return student to school (without class assignment)
  4. if student has bad results, but really bad, you can say goodbye
  5. accept new students
  6. see statistics, how many students are at school, and in each class

Live Vue.js Tutorial Preview

This tutorial is focused on components, but as you can see from the preview, many other Vue.js features are used, e.g.:

  • string interpolation
  • two-way data binding
  • watching property
  • lifecycle “created” hook
  • loop “v-for” with index used
  • click event (in shorthand syntax)

Finally, while mentioning two-way data binding, there is a big difference to components. Each type of communication (parent to child, child to parent, child to child) is one-way.

There is nothing as simple as data “v-model”, each communication flow has to be declared separately.