Vue 3 Slots Explained: Enhancing Component Flexibility

Vue 3 slots are a powerful feature that allow for more flexible and reusable components. Slots enable component templates to include "placeholders" that can be filled with custom content when the component is used, rather than having a fixed content structure. This makes slots particularly useful for creating a library of components that can be customized as needed.

What are slots in Vue 3?

Slots in Vue 3 have been enhanced from Vue 2, offering better performance and more features. The basic concept of slots remains the same: they allow parent components to pass content to child components. However, Vue 3 introduces named slots and scoped slots, which provide additional flexibility.

Basic Usage of Slots

Let's start with a simple example to understand how basic slots work. Consider a BaseLayout component with a slot where you can insert any content you want.

<!-- BaseLayout.vue -->
<template>
  <div class="container">
    <header>
      <!-- We define a slot here -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- Default slot -->
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

You can use this component and fill the slots with custom content as follows:

<template>
  <BaseLayout>
    <!-- Content for the default slot -->
    <template v-slot:default>
      <p>This is the main content of the page.</p>
    </template>

    <!-- Content for the named slot "header" -->
    <template v-slot:header>
      <h1>Page Title</h1>
    </template>

    <!-- Content for the named slot "footer" -->
    <template v-slot:footer>
      <p>Copyright © 2023</p>
    </template>
  </BaseLayout>
</template>

Scoped Slots

Scoped slots allow child components to pass data back to the parent within the slot. This is useful for creating components that are not only customizable in terms of content but also in behavior.

Consider a UserList component that accepts a scoped slot, allowing the parent component to define how each user should be displayed.

<!-- UserList.vue -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <!-- Using scoped slot to customize user display -->
      <slot name="user" :user="user">{{ user.name }}</slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    users: Array
  }
}
</script>

And here's how you might use this component:

<template>
  <UserList :users="users">
    <!-- Defining how to display each user using scoped slot -->
    <template v-slot:user="slotProps">
      <div>{{ slotProps.user.name }} - {{ slotProps.user.email }}</div>
    </template>
  </UserList>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', email: 'alice@example.com' },
        { id: 2, name: 'Bob', email: 'bob@example.com' }
      ]
    }
  }
}
</script>

In this example, the UserList component provides each user's data to the slot, and the parent component can decide how to render each user's information.

Conclusion

Vue 3 slots are a versatile feature that significantly enhances the reusability and flexibility of components. By understanding and leveraging slots, developers can create highly customizable and maintainable applications. The examples provided here are just the beginning; slots can be used in a myriad of ways to suit your specific needs. Experiment with them and see how they can improve your Vue applications.