Unlock Vue’s Slot System: From Default Slots to Advanced v-slot Techniques

Introduction

Vue’s <slot> element acts as a content distribution point inside a component template. When content is passed to a slot, the <slot> element is replaced by that content. Slots are essential when a component’s outer structure is fixed but inner parts need to be flexible, such as optional icons in a button or varying modal body content.

v-slot Usage (Vue 2.6+)

Starting with Vue 2.6, the unified <v-slot> directive replaces the older slot and slot-scope syntaxes. The new syntax supports three categories of slots: default, named, and scoped.

Default Slot

Child component defines a simple <slot> placeholder.

<template>
  <div class="content">
    <!-- default slot -->
    <header class="text">
      <!-- fallback content for the slot -->
      <slot>默认值</slot>
    </header>
  </div>
</template>

Parent component can provide content directly or via a v-slot shorthand when the child has only a default slot.

<template>
  <div class="container">
    <!-- default slot -->
    <child v-slot="slotProps">
      任意内容
      <template>内容</template>
      中间内容
      <!-- the shorthand for an exclusive default slot -->
      <template v-slot="slotProps">
        当只有默认插槽时，此为独占默认插槽的缩写<br/>
        如果组件中有其他具名插槽，这么写会报错<br/>
        slotProps 取的是子组件标签 slot 上属性数据的集合
      </template>
    </child>
  </div>
</template>

Named Slot

Child component declares multiple <slot name="..."> elements.

<template>
  <div class="content">
    <!-- named slot -->
    <main class="text">
      <slot name="main"></slot>
    </main>
    <footer class="text">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

Parent component supplies content using v-slot:name or the shorthand #name.

<template>
  <div class="container">
    <!-- named slot usage -->
    <child>
      <template v-slot:main>
        <a href="https://www.zcygov.cn" target="_blank">导航</a>
      </template>
      <template #footer>页脚（具名插槽的缩写#）</template>
      <template #footer>
        <!-- only the last definition of the same name is rendered -->
        v-slot只会添加在一个 template 上面
      </template>
    </child>
  </div>
</template>

Scoped Slot

Child component passes data to the slot via props.

<template>
  <div class="content">
    <!-- scoped slot -->
    <footer class="text">
      <slot name="footer" :user="user" :testClick="testClick">
        {{user.name}}
      </slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      user: {
        title: '测试title',
        name: '测试name'
      }
    };
  },
  methods: {
    testClick() {
      // reusable method for the parent
      alert('123');
    }
  }
};
</script>

Parent component receives the slot props via v-slot or the shorthand # syntax.

<template>
  <div class="container">
    <!-- scoped slot and destructuring syntax -->
    <child>
      <template #footer="slotProps">
        {{slotProps.user.title}}
        <button @click="slotProps.testClick">点我</button>
      </template>
      <template #footer="{user, testClick}">
        {{user.title}}<br/>
        此为解构插槽prop<br/>
        <button @click="testClick">点我</button>
      </template>
    </child>
  </div>
</template>

<script>
import Child from './component/child.vue';
export default {
  name: 'demo',
  components: { Child }
};
</script>

Other Extensions

Destructuring slot props with renaming: v-slot="{ user: person }" renames user to person.

Providing default values in destructuring: v-slot="{ user = { name: 'Guest' } }".

Dynamic slot names: v-slot:[dynamicSlotName] allows the slot name to be a variable.

Important Notes

v-slot

can only be used on a template element or as the shorthand for an exclusive default slot.

If a parent defines the same v-slot name multiple times, only the last definition is rendered.

Exclusive default‑slot shorthand works only when the child component has a single default slot; multiple slots require the full template syntax.

slot vs. slot‑scope

Before Vue 2.6, slot and slot-scope were used to create named and scoped slots. The newer v-slot syntax consolidates these features, and slot can still be used for backward compatibility, though it is deprecated in Vue 3.

Conclusion

Slots enable reusable component structures where the outer layout stays constant while inner content varies. They can also pass data and functions from child to parent, allowing shared logic such as error handling or custom callbacks.