🛠️ Vue Tip: Creating Reusable Components with Slots

In Vue.js, creating reusable components is essential for building maintainable and scalable applications. One powerful feature that Vue offers for enhancing reusability is slots. Slots allow you to compose components in a flexible and versatile manner, enabling you to pass content from a parent component to a child component.

What Are Slots?

Slots in Vue.js are placeholders inside your components that can be filled with content provided by the parent component. They make it possible to create highly reusable and configurable components.

Types of Slots

Vue provides three types of slots:

1. Default Slot
2. Named Slots
3. Scoped Slots

Let's dive into each type with examples.

Default Slot

The default slot is the simplest form of slots. It allows you to pass content from the parent component to the child component.

Example:

Parent Component:

<template>   <div>     <Card>       <p>This is some content for the card.</p>     </Card>   </div> </template>  <script setup> import Card from './Card.vue'; </script> 

Child Component (Card.vue):

<template>   <div class="card">     <slot></slot>   </div> </template>  <script setup> </script>  <style scoped> .card {   border: 1px solid #ccc;   padding: 16px;   border-radius: 8px; } </style> 

In this example, the content inside the <Card> component in the parent is passed to the Card component and rendered within the <slot> element.

Named Slots

Named slots allow you to define multiple slots with different names, giving you more control over where the content is injected.

Example:

Parent Component:

<template>   <div>     <Card>       <template #header>         <h3>Card Header</h3>       </template>       <template #body>         <p>This is the body of the card.</p>       </template>       <template #footer>         <small>Card Footer</small>       </template>     </Card>   </div> </template>  <script setup> import Card from './Card.vue'; </script> 

Child Component (Card.vue):

<template>   <div class="card">     <div class="header">       <slot name="header"></slot>     </div>     <div class="body">       <slot name="body"></slot>     </div>     <div class="footer">       <slot name="footer"></slot>     </div>   </div> </template>  <script setup> </script>  <style scoped> .card {   border: 1px solid #ccc;   padding: 16px;   border-radius: 8px; } .header, .body, .footer {   margin-bottom: 8px; } </style> 

With named slots, you can specify different sections of your component to be filled with content.

Scoped Slots

Scoped slots allow you to pass data from the child component back to the parent component, enabling more dynamic and flexible components.

Example:

Parent Component:

<template>   <div>     <ItemList :items="items">       <template #default="slotProps">         <li>{{ slotProps.item.name }} - {{ slotProps.item.price }}</li>       </template>     </ItemList>   </div> </template>  <script setup> import { ref } from 'vue'; import ItemList from './ItemList.vue';  const items = ref([   { name: 'Item 1', price: '$10' },   { name: 'Item 2', price: '$20' }, ]); </script> 

Child Component (ItemList.vue):

<template>   <ul>     <slot :item="item" v-for="item in items" :key="item.name"></slot>   </ul> </template>  <script setup> import { defineProps } from 'vue';  const props = defineProps({   items: {     type: Array,     required: true,   }, }); </script> 

In this example, the child component (ItemList) passes each item object to the parent component, allowing the parent to render the items dynamically.

Conclusion

Using slots in Vue.js is a powerful way to create flexible and reusable components. Whether you're using default slots, named slots, or scoped slots, this feature can significantly enhance the modularity and maintainability of your application.

Read More

For more tips and tricks on Vue.js, check out my previous articles:

1. Vue Once Watchers: Execute Callbacks Only Once
2. Simpler Two-Way Binding in Vue with defineModel

Happy coding! 🚀