Vue 3 Composition API and Nuxt.js Guide

In the Vue 3 component development ecosystem, Slots are the core technology for building reusable and highly flexible UIs. They allow parent components to inject content into child components, enabling true "composability" programming thinking. Compared to the relatively basic v-slot syntax sugar in Vue 2, Vue 3 underwent a deep refactor at the underlying rendering engine and template compilation level, making Slot usage more intuitive, offering superior performance, and clearer semantics. This article will delve into how Slots work in Vue 3, their core features, and best practices for complex scenarios.
In traditional component development, child components often could only receive fixed props (attributes), which limited their display flexibility. The v-slot directive in Vue 3 has completely changed this paradigm. It allows parent components to pass HTML fragments as "content" to child components, rather than just data models. This mechanism enables child components to exist like containers, waiting to be filled with specific business logic or UI structures.

For example, in a generic card component, we can define different Slots to distinguish between the header area, image display area, and action button area. The parent component simply needs to fill in content at the corresponding locations to dynamically generate cards of different styles without modifying the child component's code. This decoupling greatly enhances code maintainability and reusability.

Basic Usage and Namespace Management

Vue 3 provides multiple ways to define Slots, among which v-slot is the most common and recommended approach. By assigning a unique name to a Slot (such as title, content, or actions), parent components can precisely control which content will be rendered into which area.

<!-- Card.vue: Child Component -->
<template>
  <div class="card">
    <!-- Default Slot: Automatically matches the first v-slot when unnamed -->
    <slot name="title"></slot>
    
    <img :src="imageUrl" alt="Card Image"/>

    <!-- Custom-named Slot -->
    <slot name="actions"></slot>
  </div>
</template>

<script setup>
defineProps({ imageUrl: String });
</script>

In the parent component, we use v-slot for content injection:

<!-- App.vue: Parent Component -->
<template>
  <Card 
    :image-url="'https://example.com/photo.jpg'"
    v-slot:title="title"
    v-slot:actions="buttons">
    
      <!-- Header Area -->
      <h2>{{ title }}</h2>

      <!-- Button Area -->
      <button @click="handleClick">{{ buttons[0] ? 'Delete' : '' }}</button>
      
  </Card>
</template>

This namespace mechanism avoids content conflicts, making component communication more orderly in large-scale applications. If a v-slot is not assigned a name, Vue 3 automatically maps it to the default <slot>, requiring no additional declaration.

Dynamic Slots and Default Value Handling

In actual projects, we sometimes need to render different structures based on conditions or provide a set of "fallback" content within the child component (i.e., defaults). Vue 3 supports switching Slot positions under logical judgments using directives like v-if and v-else-if. Additionally, for empty Slots, you can use <slot name="name">Default Content</slot> to define fallback text or component structures.

<!-- Card.vue: Enhanced Version -->
<template>
  <div class="card" :class="{ 'has-actions': hasActions }">
    <!-- Default Title: Display this text if no content is passed -->
    <slot name="title">{{ defaultTitle }}</slot>
    
    <!-- Dynamic Button Area: Render logic based on props -->
    <template v-if="$slots.actions && $attrs.actionType === 'primary'">
      <button class="btn-primary" @click="$emit('onAction')">Execute Action</button>
    </template>

    <slot name="actions"></slot>
    
    <!-- Default Placeholder: Prevent visual voids when Slot is empty -->
    <div v-if="!$slots.content">
      <p class="placeholder">No content yet, please add more.</p>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({ defaultTitle: String, actionType: Boolean });
defineEmits(['onAction']);
</script>

Advanced Techniques: Passing Slots as Component Props

Beyond content injection at the template level, Vue 3 also allows passing the entire <slot> element as a string or object to child components. This is very useful when fully custom rendering logic is required (e.g., using Vue SFC with <script setup lang="ts"> combined with dynamic imports). By using v-bind="$slots" or directly assigning it to a prop, we can achieve deeper control capabilities, allowing child components to receive and parse template strings passed by parent components for secondary processing or conditional rendering.

// Card.vue (Script Setup)
const props = defineProps({ 
  // ...other properties
});

watch(() => $slots, () => {
    console.log('Slot content updated:', JSON.stringify($slots));
})

Performance Optimization and Best Practices

Although Vue 3's compiler has highly optimized v-slot, one must be cautious when handling dynamic Slots on a massive scale. First, avoid frequently creating large numbers of unnamed default Slots in templates, as this increases the compiler's parsing burden. Second, for complex nested structures, it is recommended to prioritize wrapping content with <template> tags before passing them as a single Slot to reduce DOM node fragmentation.

Furthermore, leveraging the reactivity system characteristics of Vue 3, when parent component data changes, if that data affects the rendering order or logical branches (such as v-if) of the Slot content, the child component will automatically trigger an update without needing to manually call $forceUpdate(). This reflects Vue 3's deep integration of reactivity tracking under the Composition API.

Summary

Vue 3's Slot mechanism is an indispensable tool for building modern single-page applications. By breaking through the limitations of traditional Props data passing via flexible template injection capabilities, it achieves a more natural collaboration mode between components. Mastering namespace management, default value settings, and dynamic Slot techniques can help developers create user interfaces that are both beautiful and high-performance. With the continuous evolution of Vue 3.4+ versions, the Slot system is expected to introduce more optimization features specifically targeting TypeScript and the Composition API, worth developers' continued attention and exploration.