Reading a child's state

As we saw in some recipes in this chapter, communication between parent and child is unidirectional with props (top-down) and passes through a hub with events. In this recipe, we will leverage some tricks to read a child's state directly. This technique can be useful when two components are tightly coupled by design or when some debugging is needed.

Getting ready

This recipe is not for beginners, so ensure that you understand a little about components and how events and props work before moving ahead.

How to do it...

We have a child who really ate a cookie but won't admit he did. We won't let him get away with it by checking internal state and discover the truth.

Write the HTML structure of our application, which is the following:

<div id="app"> 
  <child ref="junior"></child> 
  <p>Truth: {{childStomach}}</p> 
</div>

The ref attribute gives the component a mark that we can later retrieve from code.

Copy the child component, like the following...