Vue v-slot

Welcome to The Coding College! In Vue, the v-slot directive is the modern and unified way to handle slots in components. Introduced in Vue 2.6 and carried forward in Vue 3, it simplifies slot usage while retaining the flexibility of default, named, and scoped slots.

In this guide, we’ll cover how to use v-slot, its syntax, and best practices for leveraging this powerful feature in your Vue applications.

What is v-slot?

v-slot is a directive that binds slots in child components to content defined in parent components. It replaces older syntaxes like slot and slot-scope, offering a clearer and more consistent API for slot usage.

Basic Syntax of v-slot

<template>
  <ChildComponent>
    <template v-slot:name="slotProps">
      <!-- Content goes here -->
    </template>
  </ChildComponent>
</template>

Types of Slots Using v-slot

1. Default Slot

The default slot allows you to inject content into a child component without specifying a name.

Example: Default Slot

Child Component: ChildComponent.vue

<template>
  <div class="box">
    <slot>Default content goes here.</slot>
  </div>
</template>

Parent Component: App.vue

<template>
  <ChildComponent>
    <p>This is content from the parent.</p>
  </ChildComponent>
</template>

Rendered Output

<div class="box">
  <p>This is content from the parent.</p>
</div>

2. Named Slots

Named slots allow you to define multiple slots in a component, each with its own name.

Example: Named Slots

Child Component: ChildComponent.vue

<template>
  <div>
    <header><slot name="header">Default Header</slot></header>
    <main><slot>Default Main Content</slot></main>
    <footer><slot name="footer">Default Footer</slot></footer>
  </div>
</template>

Parent Component: App.vue

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Custom Header</h1>
    </template>
    <p>Custom Main Content</p>
    <template v-slot:footer>
      <p>Custom Footer</p>
    </template>
  </ChildComponent>
</template>

Rendered Output

<div>
  <header>
    <h1>Custom Header</h1>
  </header>
  <main>
    <p>Custom Main Content</p>
  </main>
  <footer>
    <p>Custom Footer</p>
  </footer>
</div>

3. Scoped Slots

Scoped slots enable the child component to pass data back to the parent through slot props.

Example: Scoped Slots

Child Component: ChildComponent.vue

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: Array
  }
};
</script>

Parent Component: App.vue

<template>
  <ChildComponent :items="users">
    <template v-slot:default="{ item }">
      <strong>{{ item.name }}</strong> - {{ item.email }}
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', email: '[email protected]' },
        { id: 2, name: 'Bob', email: '[email protected]' }
      ]
    };
  }
};
</script>

Rendered Output

<ul>
  <li><strong>Alice</strong> - [email protected]</li>
  <li><strong>Bob</strong> - [email protected]</li>
</ul>

Shorthand for Default Named Slots

You can simplify the syntax for default named slots by omitting v-slot:.

Example

<ChildComponent>
  <template #header>
    <h1>Shorthand Header</h1>
  </template>
</ChildComponent>

This is equivalent to:

<ChildComponent>
  <template v-slot:header>
    <h1>Shorthand Header</h1>
  </template>
</ChildComponent>

Dynamic Slot Names

Dynamic slot names allow you to use variables as slot names.

Example

Parent Component

<template>
  <ChildComponent>
    <template v-slot:[dynamicSlotName]>
      <p>Dynamic Slot Content</p>
    </template>
  </ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header'
    };
  }
};
</script>

Best Practices for Using v-slot

  1. Use Named Slots for Clarity: Avoid overloading the default slot with unrelated content.
  2. Document Slot Props: Clearly describe the props available in scoped slots.
  3. Minimize Slot Nesting: Avoid deeply nested slots to maintain readability.
  4. Leverage Shorthand: Use # shorthand for brevity in named slots.

When to Use v-slot

  1. Dynamic Layouts: For components like cards, modals, and tables.
  2. Custom Rendering: To enable customization of child components.
  3. Reusable Patterns: For shared components with variable content.

Conclusion

The v-slot directive is a key feature for creating flexible, reusable components in Vue. By mastering its syntax and applications, you can enhance the functionality and maintainability of your Vue applications.

For more tutorials and coding insights, visit The Coding College.

Leave a Comment