Slot usage with VNodes

Explores how to pass VNodes as slots to child components and how to access them in the child using the `slots` property.

// ParentComponent.vue
<template>
  <ChildComponent>
    <template v-slot:default>
      <div>This is a default slot content.</div>
    </template>
    <template v-slot:header>
      <h1>This is a header slot content.</h1>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

This is the parent component using the 'ChildComponent'. It provides VNodes for the default slot as well as a named slot 'header'.

// ChildComponent.vue
<template>
  <div>
    <header>
      <!-- Render header slot content -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- Render default slot content -->
      <slot></slot>
    </main>
  </div>
</template>

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

This is the 'ChildComponent' that accepts the VNodes from the parent component. It defines places where the 'header' and default slots will be rendered.