Understanding Slots in Vue 3 with Composition API

Slots are a powerful mechanism in Vue that enable components to define content areas that can be customized by the parent component. This promotes reusability and flexibility in building UI components. Vue 3 offers two primary slot types:

• Normal Slots: Provide a simple way to inject content from the parent component into the child component's template.
• Scoped Slots: Allow for more advanced customization by passing data (a scope) from the child component to the slot content, enabling dynamic rendering based on both parent and child data.

In Vue 3, slots allow you to create flexible components by providing a way to pass content into child components. The Composition API enhances how we use slots, making it more intuitive and powerful.

What are Slots?

Slots are a way to define placeholder content in a component that can be filled with custom content when the component is used. They help in creating reusable and customizable components.

Types of Slots

• Default Slot: The most common type, it allows you to pass content without any specific name.
• Named Slots: These allow you to specify different slots with unique names, enabling more complex layouts.
• Scoped Slots: These provide a way to expose data from the child component to the parent component using a slot. Using Slots with the Composition API

Using Slots with the Composition API

Here’s how you can define and use slots in a Vue 3 component using the Composition API:
Example of a Default Slot

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Usage:

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Named Slots

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Usage:

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

Scoped Slots

Scoped slots allow you to pass data from the child component back to the parent.

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

Usage:

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

Example: Food Products Delivery with Slots in Vue 3

Let's create a simple food delivery application using Vue 3 with the Composition API and slots. This example will showcase a main FoodDelivery component that uses slots to display a list of food items, along with a header and footer.

Step 1: Create the Main Component

Here’s the FoodDeliverycomponent that accepts named slots for the header, food items, and footer.

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

Step 2: Create Food Item Component

Next, let’s create a simple FoodItem component to represent individual food products.

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

Step 3: Using the Components

Now, let’s put everything together in a parent component that uses our FoodDelivery and FoodItem components.

Let me Explain

FoodDelivery Component: This component acts as a layout for our food delivery service. It accepts three slots: a header, a default slot for the food items, and a footer.
FoodItem Component: This represents individual food products. It takes name and price as props and has a method to simulate adding the item to a cart.

• App Component: This is the parent component where everything is brought together. It uses the FoodDelivery component and fills the slots with a welcome message, a list of FoodItemcomponents, and a thank you message.

Use Cases

• Customizing Lists: Scoped slots are ideal for creating list components where each item can have distinct rendering logic based on its properties. The child component can pass the item data to the slot, and the parent component can define the template for each item using the scoped slot. (BasePaginated.vue)
• Conditional Rendering: Scoped slots enable selective rendering within the child component based on data it provides to the slot. For instance, you could conditionally display a message or error state within the slot content.
• Complex Layouts: Scoped slots facilitate the creation of more intricate layouts where different parts of the layout can be customized by the parent component while allowing the child component to inject specific content or functionality using the scope.

<template>
  <div>
    <h2>{{ item.name }}</h2>
    <slot :item="item" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { name: 'Item 1', description: 'This is item 1' },
  { name: 'Item 2', description: 'This is item 2' },
]);
</script>

<template>
  <div v-for="item in items" :key="item.name">
    <MyComponent :item="item">
      <template #default="{ item }">
        <p>{{ item.description }}</p>
      </template>
    </MyComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue';
</script>

Advanced Considerations

• Named Scoped Slots: You can assign names to scoped slots (e.g., ...), enabling you to have multiple scoped slots within a single child component and reference them by name in the parent component.
• Slot Functions: In Vue 2, slots were accessed as $slotswithin the child component. Vue 3 offers a more reactive approach using $scopedSlots, which are functions that provide access to the slot content. This allows for dynamic slot manipulation and conditional rendering within the child component.

Let's enhance the scoped slot example to make it clearer and more functional. This example will demonstrate how to use scoped slots to pass item data from a child component to a parent component, allowing for flexible rendering.

Step 1: Create the ItemList Component

This component will display a list of items and use a scoped slot to allow the parent to customize how each item is rendered.

<template>
  <div>
    <h2>Item List</h2>
    <div v-for="item in items" :key="item.name">
      <h3>{{ item.name }}</h3>
      <slot :item="item">
        <!-- Default slot content if no slot is provided -->
        <p>{{ item.description }}</p>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { name: 'Item 1', description: 'This is item 1' },
  { name: 'Item 2', description: 'This is item 2' },
]);
</script>

Step 2: Using the ItemList Component with Scoped Slots

Now, let’s create a parent component that uses the ItemList component and provides a custom template for rendering each item using the scoped slot.

<template>
  <ItemList>
    <template #default="{ item }">
      <div class="custom-item">
        <h4>{{ item.name }}</h4>
        <p>{{ item.description }}</p>
        <button @click="handleClick(item)">Select</button>
      </div>
    </template>
  </ItemList>
</template>

<script setup>
import ItemList from './ItemList.vue';

const handleClick = (item) => {
  alert(`You selected: ${item.name}`);
};
</script>

<style>
.custom-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
}
</style>

ItemList Component:

• This component defines a list of items and uses a scoped slot to expose each item to the parent component.
• If no slot is provided, it defaults to displaying the item's description. ###Parent Component:
• This component uses the ItemList and provides a custom template for rendering each item.
• It accesses the item data through the scoped slot and includes a button that triggers a function when clicked.

The example demonstrates how to effectively use scoped slots in Vue 3 to create a flexible and reusable component structure. The parent component can customize the rendering of each item while still accessing the data provided by the child component.

Let's recap

This example illustrates how you can utilize slots in a Vue 3 application to create a flexible food delivery component system. You can easily customize the header, footer, and content without modifying the main component. If you have any further questions or need more details, feel free to ask in a comment.

By effectively leveraging normal and scoped slots in Vue 3 with the Composition API, you can build highly reusable and customizable UI components, promoting maintainability and code organization in your Vue applications. You can choose the appropriate slot type based on your specific content injection and dynamic rendering requirements.
The way to grow is to connect.
Happy coding!