v-slot 插槽的使用

1. 备用内容（默认内容）

   // 子组件：TestSlot1.vue
   <slot>
      DEMO
   </slot>
   // 父组件：
     <TestSlot1 />  // 这里会显示默认值 DEMO
   
     <TestSlot1>  
        Save   // 这里有值会覆盖默认值
     </TestSlot1>

2. 具名插槽

// 字面意思：具有name的插槽
// TestSlot2.vue  
// <!-- 定义具名插槽 -->  slot可以理解为占位，
      <div class="container">
        <header>
          <!-- 定义具名插槽 -->
          <slot name="header"></slot>
        </header>
        <main>
          <!-- 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 -->
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>

// 父组件引入 TestSlot2.vue 
      <TestSlot2>
      // 使用插槽
        <template #header>
          // 这里可以是字符串、标签也可以是组件
          <h1>具名插槽</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>

3. 作用域插槽

// TestSlot3.vue
    <div lass="container">
        <!-- 作用域插槽 -->
        <ul>
          <li
            v-for="( item, index ) in items"
            :key="index"
          >
            <!-- 这里把子组件的数据传递出去 -->
            <slot
              :item="item"
              :index="index"
            ></slot>
          </li>
        </ul>
    </div>
    
    setup () {
        const items = ['Feed a cat', 'Buy milk']
        return {
          items
        }
     }
     
 // 父组件引入 TestSlot3.vue
   <TestSlot3>
    // <!-- 写法一： v-slot:default="slotProps"  使用v-slot 来定义我们提供的插槽 prop 的名字 -->
    <template #default="slotProps">
      <p>{{ slotProps.item }}</p>
      <p>{{ slotProps.index }}</p>
    </template>

    // <!-- 写法二： 解构插槽 Prop-->
    <template #default="{ item, index }">
      <p>{{ item }}</p>
      <p>{{ index }}</p>
    </template>

    // <!-- 写法三： 将 item 重命名为 todo（当插槽提供了多个 prop 的时候）-->
    <template #default="{ item: todo, index: getIndex }">
      <p>{{ todo }}</p>
      <p>{{ getIndex }}</p>
    </template>

    // <!-- 写法四：定义备用内容，用于插槽 prop 是 undefined 的情形 -->
    <template #default="{ item = 'Placeholder' }">
      <p>{{ item }}</p>
    </template>
  </TestSlot3>