vue插槽实现

Vue 插槽的基本概念

插槽（Slot）是 Vue 组件化开发中的核心功能之一，允许父组件向子组件传递模板片段，实现内容分发。插槽为组件提供了更高的灵活性和复用性。

默认插槽

默认插槽是最基础的插槽形式，子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换子组件中的 <slot> 标签。

子组件定义：

<template>
  <div class="child-component">
    <slot></slot>
  </div>
</template>

父组件使用：

<template>
  <ChildComponent>
    <p>这段内容会替换子组件的 slot 标签</p>
  </ChildComponent>
</template>

具名插槽

具名插槽允许定义多个插槽，并通过名称区分。子组件通过 <slot name="xxx"> 指定插槽名称，父组件通过 <template v-slot:xxx> 或简写 #xxx 传递内容。

子组件定义：

<template>
  <div class="child-component">
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件使用：

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
    <template #content>
      <p>这是主体内容</p>
    </template>
    <template #footer>
      <p>这是底部内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽

作用域插槽允许子组件向插槽传递数据，父组件可以访问这些数据并自定义渲染逻辑。子组件通过 <slot :data="data"> 传递数据，父组件通过 v-slot="slotProps" 接收。

子组件定义：

<template>
  <div class="child-component">
    <slot :item="item" :index="index"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: { name: '示例数据' },
      index: 0
    }
  }
}
</script>

父组件使用：

<template>
  <ChildComponent>
    <template v-slot="{ item, index }">
      <p>索引: {{ index }}, 数据: {{ item.name }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名

动态插槽名允许通过变量动态指定插槽名称，适用于需要根据条件切换插槽的场景。

父组件使用：

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

<script>
export default {
  data() {
    return {
      dynamicSlotName: 'header'
    }
  }
}
</script>

插槽的默认内容

子组件可以在 <slot> 标签内定义默认内容，当父组件未提供插槽内容时显示。

子组件定义：

<template>
  <div class="child-component">
    <slot>
      <p>这是默认内容</p>
    </slot>
  </div>
</template>

注意事项

• 插槽内容是在父组件作用域中编译的，因此只能访问父组件的数据和方法。
• 作用域插槽的数据传递是单向的，父组件无法直接修改子组件传递的数据。
• 在 Vue 3 中，v-slot 可以简写为 #，例如 #header 等同于 v-slot:header。
• 避免在插槽中使用复杂的逻辑，保持插槽的简洁性和可维护性。