Making components talk to each other

In the Passing data to your components with props recipe, we saw how parent components can talk to children components; this recipe is more general. How can two components exchange data in the more general case? You will learn how in the next few minutes.

Getting ready

You only need to know what a component is to proceed with this recipe. If I were you, though, I would take a look at the preceding recipe to have a sense of context of what we are talking about.

 

How to do it...

Our application will consist of two blabber components that talk to each other. Here's the HTML:

<div id="app"> 
  <blabber></blabber> 
  <blabber></blabber> 
</div>

Each blabber component will contain a script to recite as a dialogue. Since we want to keep it simple, the dialogue will be circular and will go on forever:

dialogue: [ 
  'hello', 
  'how are you?', 
  'fine thanks', 
  'let's go drink!', 
  'alright, where?', 
  'to hello's bar', 
  'hello...