vue插槽实现功能

Vue 插槽的基本概念

插槽（Slot）是 Vue 组件化开发中的重要特性，允许父组件向子组件传递模板片段，实现内容分发。插槽的核心作用是增强组件的灵活性和复用性。

默认插槽

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

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

父组件使用：

<ChildComponent>
  <p>父组件传入的内容</p>
</ChildComponent>

最终渲染结果会显示子组件的标题和父组件传入的段落。

具名插槽

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

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

父组件使用：

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

v-slot 可简写为 #，例如 #header。

作用域插槽

子组件通过插槽向父组件传递数据，父组件决定如何渲染。
子组件示例：

<template>
  <div>
    <slot :item="itemData"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return { itemData: { name: '示例数据' } };
  }
};
</script>

父组件使用：

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

具名作用域插槽需指定名称，例如 v-slot:body="props"。

动态插槽名

通过动态指令绑定插槽名，实现灵活分发。

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

dynamicSlotName 是父组件的动态变量。

插槽的默认内容

子组件可在 <slot> 内定义默认内容，父组件未提供内容时显示。

<slot>默认文本</slot>

插槽的高级应用

• 渲染作用域：插槽内容在父组件作用域编译，但可访问子组件传递的数据。
• 解构插槽 Prop：作用域插槽支持解构，例如 v-slot="{ item }"。

通过合理使用插槽，可以构建高度可定制和复用的组件体系。