Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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