vue slot实现

Vue Slot 实现方法

Vue 的 slot（插槽）是一种内容分发机制，允许父组件向子组件传递模板片段，实现灵活的组件复用。以下是 slot 的核心用法和实现方式：

默认插槽

子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换该标签：

<!-- 子组件 Child.vue -->
<template>
  <div>
    <slot>默认内容（当父组件未传递内容时显示）</slot>
  </div>
</template>

<!-- 父组件 -->
<Child>
  <p>父组件插入的内容</p>
</Child>

具名插槽

通过 name 属性定义多个插槽，父组件用 v-slot 指令指定目标插槽：

<!-- 子组件 Layout.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>  <!-- 默认插槽 -->
    </main>
  </div>
</template>

<!-- 父组件 -->
<Layout>
  <template v-slot:header>
    <h1>标题内容</h1>
  </template>
  <p>主内容（自动插入默认插槽）</p>
</Layout>

作用域插槽

子组件通过插槽向父组件传递数据，父组件可基于数据自定义渲染逻辑：

<!-- 子组件 List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<!-- 父组件 -->
<List :items="listData">
  <template v-slot:default="slotProps">
    <span>{{ slotProps.item.name }}</span>
  </template>
</List>

动态插槽名

通过动态指令参数绑定插槽名：

<template v-slot:[dynamicSlotName]>
  <!-- 内容 -->
</template>

缩写语法

• v-slot:header 可缩写为 #header
• 默认插槽可缩写为 v-slot="slotProps" 或 #default="slotProps"

注意事项

• 默认插槽和具名插槽不能混合使用（Vue 2 中会警告，Vue 3 中会报错）。
• 作用域插槽的数据传递遵循单向数据流原则。
• Vue 3 中废弃了 slot 和 slot-scope 属性，统一使用 v-slot 指令。