Slot Content Rendering

Explain how to render default and named slots within components to promote content reuse and composition.

// parent-component.vue
<template>
  <div>
    <h2>I am the parent component</h2>
    <child-component>
      <template v-slot:header>
        <h1>This is a header slot</h1>
      </template>
      <template v-slot:default>
        <p>This is the default slot content</p>
      </template>
      <template v-slot:footer>
        <h3>This is a footer slot</h3>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './child-component.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

This is the parent component where the ChildComponent is used. The ChildComponent has three slots defined - header, default, and footer. The parent is providing content for these slots using the `v-slot` directive (or `#` shorthand for `v-slot` since Vue 2.6.0+).

// child-component.vue
<template>
  <div>
    <section>
      <!-- Named slot 'header' -->
      <slot name="header"></slot>
    </section>

    <section>
      <!-- Default slot without name attribute -->
      <slot></slot>
    </section>

    <section>
      <!-- Named slot 'footer' -->
      <slot name="footer"></slot>
    </section>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

This is the child component that has slots defined in its template. The slots `header` and `footer` are named slots, while the unnamed `slot` tag is the default slot. When this component is used in a parent, content inserted into the `header` and `footer` named slots will appear in their respective sections, and any other content will appear in the default slot section.