Vue.js 2 Cookbook

Scoped slots

In Vue 2.1, a new feature was added that lets you pass data between the content of the slot and its parent component.

This is very useful when we have many slots and many of them need different styling or even when we don't know the number of slots to fill in advance.

First of all, since we plan to use the cat component multiple times, let's make a small modification that will get a different cat image at every instantiation:

Vue.component('cat', {   template: `     <div>       <figure>       <img :src="'http://lorempixel.com/220/220/cats/?' + name"/>         <figcaption>{{name}}</figcaption>       </figure>     </div>   `,   props: ['name'] })

We added the name of the cat at the end of the link; this way, since we pick a random cat every time, the image ...