vue实现slot

Vue 插槽（Slot）的实现

Vue 的插槽（Slot）是一种组件间内容分发的机制，允许父组件向子组件传递模板片段。插槽分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽

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

子组件定义：

<template>
  <div>
    <h2>子组件标题</h2>
    <slot></slot>
  </div>
</template>

父组件使用：

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

具名插槽

具名插槽允许定义多个插槽，通过 name 属性区分不同插槽。

子组件定义：

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

父组件使用：

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

作用域插槽

作用域插槽允许子组件向父组件传递数据，父组件可以自定义渲染逻辑。

子组件定义：

<template>
  <div>
    <slot :item="item" :index="index"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: '子组件数据',
      index: 1
    }
  }
}
</script>

父组件使用：

<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>接收到的数据: {{ slotProps.item }}, 索引: {{ slotProps.index }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名

Vue 2.6.0+ 支持动态插槽名，通过方括号语法实现。

父组件使用：

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

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

缩写语法

Vue 提供了插槽的缩写语法，v-slot: 可以简写为 #。

父组件使用：

<template>
  <ChildComponent>
    <template #header>
      <h1>缩写语法头部内容</h1>
    </template>
  </ChildComponent>
</template>

插槽机制为 Vue 组件提供了灵活的内容分发能力，通过合理使用可以构建高度可复用的组件结构。