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>
Run Example »
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>
Run Example »
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>
Run Example »
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>
Run Example »
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>
Run Example »
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>
Run Example »