Vue 中什么是插槽(slot)？

在 Vue 中，插槽（Slot）是一种用于在父组件中分发内容到子组件的灵活机制。它允许父组件将任意内容“插入”到子组件的特定位置，从而实现组件之间的灵活组合和复用。

类型：

1. 具名插槽（Named Slots）：允许父组件将内容分发到子组件中的具名插槽，使得父组件能够控制内容的插入位置。

   <!-- 子组件中定义具名插槽 -->
   <template>
     <div>
       <slot name="header"></slot>
       <slot></slot>
     </div>
   </template>
   
   <!-- 在父组件中使用具名插槽 -->
   <template>
     <BaseLayout>
       <template v-slot:header>
         <h1>Header Content</h1>
       </template>
       <p>Main Content</p>
     </BaseLayout>
   </template>
   

2. 作用域插槽（Scoped Slots）：允许子组件向父组件传递数据，使得父组件能够在插槽中使用子组件的数据。

   <!-- 子组件中定义作用域插槽 -->
   <template>
     <ul>
       <li v-for="item in items" :key="item.id">
         <slot :item="item"></slot>
       </li>
     </ul>
   </template>
   
   <!-- 在父组件中使用作用域插槽 -->
   <template>
     <BaseList :items="list">
       <template v-slot:default="slotProps">
         <span>{{ slotProps.item.name }}</span>
       </template>
     </BaseList>
   </template>
   

插槽可以使组件更具灵活性和可复用性，允许父组件在使用子组件时动态地注入内容或数据，使得组件更易于定制和扩展。