Vue v-slot
To refer to named slots, we require the v-slot directive.
More control over the content’s placement within the child component’s template is possible using named slots.
Components that are more reusable and adaptable can be made with named slots.
Let’s examine what occurs if we utilize two slots in the component before using v-slot and named slots:
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>
We can observe that when a component has two slots, the material just shows up twice.
v-slot and Named Slots
If a component has many <slot> and we wish to specify which <slot> the content appears in, we must use v-slot to transport the content to the appropriate location and name the slots.
Example
We give the slots distinct names so that we can distinguish between them.
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
And now we can direct the content to the appropriate slot using App.vue is v-slot feature.
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 an empty <slot>, it will be the default for any components that are not indicated with v-slot or that are marked with v-slot:default.
We only need to make two little adjustments to our prior example in order to see how this functions:
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>
To further emphasize that the content belongs in the default slot, we can label it with the default value v-slot:default, as was previously described.
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 >
The v-slot directive can be used as an attribute in the component tag, as you have seen.
Moreover, v-slot can be used in a <template> element to target certain <slot> for longer sections of material.
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>
Since the <template> element is merely a placeholder for the content and is not rendered, we use it to direct certain content to a specific <slot>. Examining the produced page will show you this because the template tag is absent.
v-slot Shorthand #
# is the abbreviation for v-slot:.
This implies that:
<slot-comp v-slot:topSlot>'Hello!'</slot-comp>
Writable 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>
