vue中的slot - 技术栈

在Vue.js中，slot主要有以下几种类型：

默认插槽（Default Slot） 默认插槽是最常见的一种插槽类型，即没有名称的插槽。当父组件在子组件标签内部放置的所有内容都会被传递到子组件的默认插槽中。

子组件（子组件 - ChildComponent.vue）：
复制代码
```
<template>
  <div class="container">
    
    <slot></slot>
  </div>
</template>
```
父组件（父组件 - ParentComponent.vue）：
复制代码
```
<template>
  <div class="container">
    
    <slot></slot>
  </div>
</template>
```

具名插槽（Named Slots） 具名插槽允许开发者定义具有特定名称的插槽，从而在子组件中以更精细的方式控制内容的插入位置。

子组件（子组件 - ChildComponent.vue）：

复制代码

<template>
  <div class="container">
    <header>
      <!-- 这里是名为'header'的具名插槽 -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 这里是默认插槽的位置 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 这里是名为'footer'的具名插槽 -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件（ParentComponent.vue）：

复制代码

<template>
  <ChildComponent>
    <!-- 插入到名为'header'的具名插槽 -->
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
    
    <!-- 插入到默认插槽 -->
    <p>这是主要内容</p>
    
    <!-- 插入到名为'footer'的具名插槽 -->
    <template v-slot:footer>
      <p>这是底部内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽（Scoped Slots） 作用域插槽允许父组件访问子组件的数据并在插槽内容中使用这些数据。

子组件（ChildComponent.vue）：

复制代码

<template>
  <ul>
    <!-- 作用域插槽，将item作为作用域内的属性暴露给父组件 -->
    <li v-for="item in items">
      <slot :item="item" name="itemSlot"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

父组件（ParentComponent.vue）：

复制代码

<template>
  <ChildComponent>
    <!-- 使用v-slot指令定义作用域插槽 -->
    <template v-slot:itemSlot="slotProps">
      <strong>{{ slotProps.item }}</strong>
    </template>
  </ChildComponent>
</template>

在上述示例中，v-slot（在Vue 2.x 中也写作 slot）是Vue 2.6+引入的新语法糖，用于更加清晰地表示插槽的使用。在早期版本中，需要使用 slot 属性配合 <template> 标签实现类似的功能。在Vue 3.x中，v-slot 已经成为标准语法。