Vue v-slot
We need the v-slot directive to refer to named slots.
Named slots allow for more control over where the content is placed within the child component's template.
Named slots can be used to create more flexible and reusable components.
Before using v-slot and named slots, let's see what happens if we use two slots in the component:
Example
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
With two slots in a component, we can see that the content simply appears both places.
v-slot and Named Slots
If we have more than one <slot> in a component, but we want to control in which <slot> the content should appear, we need to name the slots and use v-slot to send the content to the right place.
Example
To be able to differentiate the slots we give the slots different names.
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
And now we can use v-slot in App.vue to direct the content to the right slot.
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Default Slots
If you have a <slot> with no name, that <slot> will be default for components marked with v-slot:default, or components that are not marked with v-slot.
To see how this works we just need to make two small changes in our previous example:
Example
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
As already mentioned, we can mark content with the default value v-slot:default to make it even more clear that the content belongs to the default slot.
Example
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default>'Default slot'</slot-comp>
v-slot in <template>
As you have seen the v-slot directive can be used as an attribute in the component tag.
v-slot can also be used in a <template> tag to direct larger parts of content to a certain <slot>.
Example
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
We use the <template> tag to direct some content to a certain <slot> because the <template> tag is not rendered, it is just a placeholder for the content. You can see this by inspecting the built page: you will not find the template tag there.
v-slot Shorthand #
The shorthand for v-slot: is #.
This means that:
<slot-comp v-slot:topSlot>'Hello!'</slot-comp>
Can be written as:
<slot-comp #topSlot>'Hello!'</slot-comp>
Example
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp #topSlot>'Hello!'</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
