vue插槽实现

Vue 插槽的基本概念

插槽（Slot）是 Vue 组件化开发中的重要特性，允许父组件向子组件传递模板片段，实现内容分发。插槽分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽

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

<template>
  <div>
    <h2>子组件标题</h2>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

父组件使用：

<template>
  <ChildComponent>
    <p>这是插入到子组件的内容</p>
  </ChildComponent>
</template>

具名插槽

通过 name 属性为插槽命名，实现多内容分发。
子组件示例：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>

父组件使用：
使用 v-slot 指令或 # 缩写指定插槽名：

<template>
  <ChildComponent>
    <template v-slot:header>
      <h3>头部内容</h3>
    </template>
    <template #body>
      <p>主体内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽

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

<template>
  <div>
    <slot :item="itemData"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return { itemData: { text: '子组件数据' } };
  }
};
</script>

父组件使用：
通过 v-slot 接收子组件传递的数据：

<template>
  <ChildComponent>
    <template v-slot="slotProps">
      <p>{{ slotProps.item.text }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名

通过动态指令绑定插槽名，实现灵活分发。
父组件示例：

<template>
  <ChildComponent>
    <template #[dynamicSlotName]>
      <p>动态插槽内容</p>
    </template>
  </ChildComponent>
</template>
<script>
export default {
  data() {
    return { dynamicSlotName: 'customSlot' };
  }
};
</script>

插槽的默认内容

子组件可在 <slot> 内部定义默认内容，当父组件未传递内容时显示。
子组件示例：

<template>
  <slot>
    <p>默认内容（父组件未传递时显示）</p>
  </slot>
</template>

注意事项

• 插槽内容在父组件作用域编译，无法直接访问子组件数据（作用域插槽除外）。
• v-slot 可简写为 #，但需注意具名插槽和作用域插槽的语法差异。
• Vue 3 中废弃了 slot 和 slot-scope 属性，统一使用 v-slot。