Slots named in Vue.js
In our previous article we saw an introduction to Slots in Vue.js. Slots provide great flexibility in terms of how a component is rendered and give the possibility of injecting content into them just like an HTML block element allows. In addition to this, Vue goes beyond by allowing different segments or slots to be defined within the same component. Today we will see the named slots.
Named slots
As already mentioned, it is possible to define more than one slot in the same component. To recognize each slot individually, we must assign it a name with the name attribute. In our template we could have something like the following for defining a media component.
<div class="media">
<slot name="img"></slot>
<div class="media-body">
<h5 class="m-2">
<slot name="title"></slot>
</h5>
<div class="ml-2">
<slot name="content"></slot>
</div>
</div>
</div>
Notice that we have defined three slots, one for the image, another one for the title, and another for the content. We could use this component in our HTML as follows:
<media>
<img src="http://lorempixel.com/100/100/" slot="img" />
<span slot="title">Random Image</span>
<p slot="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</media>
You can see this example running on codepen below.
Default slot
We can improve the previous code a bit and use the default content of the slot to display a random image as follows:
<slot name="img">
<img src="http://lorempixel.com/100/100/" />
</slot>
Another thing we can do is to define the default slot. If we don't define the name attribute in a slot, it will be taken as the default slot. Our template would look like this:
<div class="media">
<slot name="img">
<img src="http://lorempixel.com/100/100/" />
</slot>
<div class="media-body">
<h5 class="m-2">
<slot name="title"></slot>
</h5>
<div class="ml-2">
<slot></slot>
</div>
</div>
</div>
This way we can simplify our HTML a bit without having to explicitly define the slot for the content.
<media>
<span slot="title">Random Image</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</media>
Below you can see this example running on codepen:
Slots with template tag
Slots on the template tag must be defined with the v-slot attribute. The advantage of using the template tag is that it allows you to define a slot with multiple elements without having to encapsulate everything in a generic element like a div.
Taking the previous example, if we wanted to add more than one element to the title without encapsulating everything in a div element, we could do the following:
<template v-slot:title>
<strong>Random</strong>
<span>Image</span>
</template>
This syntax is available since version 2.6.0 of Vue. Before this version, you should use the same slot attribute on the template tag as we saw earlier.
v-slot:name
The result would be what you see on codepen below.