How it works...

When using composition, there's a simple rule of thumb from the official docs that you have to keep in mind.

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

This means that you have to pay some attention to the variables you use in your templates, especially props.

Let's examine our course component more closely. We declared a prop called menu of the Array type, and we used it like this:

<div id="app">   <course :menu="menu1"></course>   <course :menu="menu2"></course> </div>

In this context, we are writing the template of the Vue root instance. As a matter of fact, menu1 and menu2 are declared exactly there and we are able to use them without any ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.