vue slot实现

Vue Slot 实现方法

Vue 的插槽（Slot）是一种强大的内容分发机制，允许父组件向子组件传递模板片段。以下是几种常见的插槽实现方式：

默认插槽

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

子组件定义：

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件使用：

<ChildComponent>
  <p>这段内容会显示在子组件的slot位置</p>
</ChildComponent>

具名插槽

当需要多个插槽时，可以使用具名插槽。子组件通过 name 属性为插槽命名，父组件通过 v-slot 指令指定内容插入哪个插槽。

子组件定义：

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

父组件使用：

<ChildComponent>
  <template v-slot:header>
    <h1>这是头部内容</h1>
  </template>

  <p>这是默认插槽内容</p>

  <template v-slot:footer>
    <p>这是底部内容</p>
  </template>
</ChildComponent>

作用域插槽

作用域插槽允许子组件向插槽传递数据，父组件可以访问这些数据并决定如何渲染。

子组件定义：

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

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

父组件使用：

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

动态插槽名

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

父组件使用：

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

缩写语法

v-slot 可以缩写为 #，使模板更简洁。

父组件使用：

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

独占默认插槽的缩写

当只有默认插槽时，可以直接在组件上使用 v-slot。

父组件使用：

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

Vue 插槽系统提供了灵活的内容分发机制，可以根据具体需求选择合适的插槽类型和用法。