vue插槽实现

插槽的基本概念

Vue插槽（Slot）是一种内容分发机制，允许父组件向子组件传递模板片段，子组件通过<slot>标签定义接收位置。插槽的核心作用是增强组件的灵活性和复用性。

默认插槽

子组件中定义<slot>标签，父组件传入的内容会替换该标签。若父组件未提供内容，则显示<slot>内的默认内容。
子组件示例：

<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

父组件使用：

<ChildComponent>替换默认内容</ChildComponent>

具名插槽

通过name属性为插槽命名，实现多内容分发。父组件使用v-slot:name或#name指令指定插入位置。
子组件示例：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot>
  </div>
</template>

父组件使用：

<ChildComponent>
  <template v-slot:header>头部内容</template>
  默认插槽内容
  <template #footer>底部内容</template>
</ChildComponent>

作用域插槽

子组件通过插槽向父组件传递数据，父组件通过v-slot:name="props"接收数据并自定义渲染逻辑。
子组件示例：

<template>
  <div>
    <slot name="item" v-for="item in list" :item="item"></slot>
  </div>
</template>

父组件使用：

<ChildComponent>
  <template #item="{ item }">
    <span>{{ item.name }}</span>
  </template>
</ChildComponent>

动态插槽名

通过动态指令绑定插槽名，适用于需要动态切换插槽的场景。
示例：

<ChildComponent>
  <template v-slot:[dynamicSlotName]>动态内容</template>
</ChildComponent>

插槽的注意事项

• 默认插槽的缩写语法为v-slot或#default。
• 作用域插槽的数据仅在插槽模板内可用。
• Vue 3中废弃了slot和slot-scope特性，统一使用v-slot。