Vue.js 2 Cookbook

How it works...

The ref we used on the child tag is a special attribute that we can put it on components or on elements in the page to get a reference that we can use later on in the code.

The use of ref is not reactive, for this reason you cannot bind it to a variable. Furthermore, the $refs option takes some time to be populated; we had to wait for the mounted hook to be triggered before being able to use it.

This code, for example, doesn't work:

<div id="app">   <child ref="junior"></child>   <p>Truth: {{$refs.junior.stomach}}</p> </div>

The reason is that since the mustaches are evaluated in the render of the template (in this case, the HTML) and the $refs variable is populated after the said render, junior is undefined at this point ...