How can you implement content distribution using slots and named slots?

In Vue.js, slots are a powerful feature for implementing content distribution within components. They allow us to define parts of the component's content in the parent component and pass them to specific locations in the child component. This is particularly useful for creating reusable and flexible component libraries.

Basic Slot Usage:

Suppose we have a basic Card component that we want to use with different content in various places while maintaining the same styling and structure. We can define the Card component as follows:

vue
<template>
  <div class="card">
    <div class="card-body">
      <slot></slot> <!-- Default slot -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

In the parent component, we can use the Card component and pass content as follows:

vue
<template>
  <Card>
    <p>This is some card content</p>
  </Card>
</template>

Here, <p>This is some card content</p> will be inserted into the <slot></slot> position in the Card component.

Named Slot Usage:

If our component structure is more complex and requires multiple slots, we can use named slots. Continuing with the above Card component, we modify it to include multiple slots:

vue
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot> <!-- Named slot "header" -->
    </div>
    <div class="card-body">
      <slot name="body"></slot> <!-- Named slot "body" -->
    </div>
    <div class="card-footer">
      <slot name="footer"></slot> <!-- Named slot "footer" -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

In the parent component, we can specify which content should go into each slot:

vue
<template>
  <Card>
    <template v-slot:header>
      <h1>Title</h1>
    </template>
    <template v-slot:body>
      <p>This is the main content.</p>
    </template>
    <template v-slot:footer>
      <span>Copyright information</span>
    </template>
  </Card>
</template>

In this example, <h1>Title</h1>, <p>This is the main content.</p>, and <span>Copyright information</span> will be inserted into the corresponding named slots in the Card component.

By using default and named slots, we can create highly flexible and reusable Vue components, making development more modular and efficient.