1. Alternate content (default content)

   // Subcomponent: testSlot1.vue
   <slot>
      DEMO
   </slot>
   // Parent component:
     <TestSlot1 />  // The default value DEMO will be displayed
   
     <TestSlot1>Save // There are values that override the defaults</TestSlot1>
Copy the code

2. Named slot

// A slot with name
// TestSlot2.vue  
/ / <! -- Define named slot --> slot
      <div class="container">
        <header>
          <! -- Define named slot -->
          <slot name="header"></slot>
        </header>
        <main>
          <! A <slot> exit without a name will have the implied name "default". -->
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>

// The parent component imports testslot2.vue
      <TestSlot2>// Use slots<template #header>// This can be a string, tag, or component<h1>A named slot</h1>
        </template>

        <template #default>
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
        </template>

        <template #footer>
          <p>Here's some contact info</p>
        </template>
     </TestSlot2>
Copy the code

3. Scope slot

// TestSlot3.vue
    <div lass="container"> <! -- Scope slot --><ul>
          <li
            v-for="( item, index ) in items"
            :key="index"
          >
            <! -- Pass the data of the child component
            <slot
              :item="item"
              :index="index"
            ></slot>
          </li>
        </ul>
    </div>
    
    setup () {
        const items = ['Feed a cat'.'Buy milk']
        return {
          items
        }
     }
     
 // The parent component imports testslot3.vue
   <TestSlot3>
    / / <! -- c-props :default="slotProps" -- props =" props"
    <template #default="slotProps">
      <p>{{ slotProps.item }}</p>
      <p>{{ slotProps.index }}</p>
    </template>

    / / <! --> < span style = "max-width: 100%; clear: both;
    <template #default="{ item, index }">
      <p>{{ item }}</p>
      <p>{{ index }}</p>
    </template>

    / / <! Rename item to todo (when slot provides multiple prop) -->
    <template #default="{ item: todo, index: getIndex }">
      <p>{{ todo }}</p>
      <p>{{ getIndex }}</p>
    </template>

    / / <! Prop = undefined; prop = undefined;
    <template #default="{ item = 'Placeholder' }">
      <p>{{ item }}</p>
    </template>
  </TestSlot3>
Copy the code