Vue v-slot Directive
Example
Using the v-slot
directive to direct the 'Hello!' message to the named slot 'bottomSlot', inside the <slot-comp> component.
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Run Example »
See more examples below.
Definition and Usage
The v-slot
directive is used to direct content to a named slot.
The shorthand for v-slot:
is #
.
The v-slot
directive can also be used to receive data from scoped slots, provided by using v-bind
in the child component.
v-slot
can be used on components, or on the built-in <template>
element.
v-slot
is used on <template>
elements when we want to assign content to more than one slot in a component.
More examples
Example 1
Using v-slot
on <template>
elements to assign content to two different slots in the same component.
App.vue
:
<template>
<h1>App.vue</h1>
<p>The component has two slots, and the template element is used to assign content to both.</p>
<slot-comp>
<template v-slot:topSlot>
<div>
<p>Tigers are beautiful!</p>
<img src="tiger.svg" alt="tiger" width="100">
</div>
</template>
<template v-slot:bottomSlot>
<div>
<p>Whales can be very big</p>
</div>
</template>
</slot-comp>
</template>
SlotComp.vue
:
<template>
<hr>
<h3>Component</h3>
<slot name="topSlot"></slot>
<slot name="bottomSlot"></slot>
</template>
Run Example »
Example 2
Using v-slot
to direct content to the default slot.
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 »
Example 3
Using the v-slot:
shorthand #
.
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 »
Example 4
Using v-slot
to receive data from a scoped slot.
App.vue
:
<slot-comp v-slot:"dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
Run Example »
Related Pages
Vue Tutorial: Vue Slots
Vue Tutorial: Scoped Slots
Vue Tutorial: Vue Components
Vue Tutorial: Vue v-slot
Vue Reference: Vue <slot> Element
Vue Reference: Vue $slots Object