vue实现slot

Vue 中的 Slot 实现方法

Vue 的 slot 是一种内容分发机制，允许父组件向子组件插入内容。以下是几种常见的 Slot 实现方式：

默认 Slot

子组件通过 <slot> 标签定义插槽位置，父组件可以在子组件标签内插入内容。

子组件 (ChildComponent.vue):

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

父组件:

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

具名 Slot

当需要多个插槽时，可以使用具名 Slot 进行区分。

子组件 (ChildComponent.vue):

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

父组件:

<template>
  <ChildComponent>
    <template v-slot:header>
      <h3>头部内容</h3>
    </template>

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

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

作用域 Slot

当子组件需要向插槽传递数据时，可以使用作用域 Slot。

子组件 (ChildComponent.vue):

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 25
      }
    }
  }
}
</script>

父组件:

<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>用户名: {{ slotProps.user.name }}</p>
      <p>年龄: {{ slotProps.user.age }}</p>
    </template>
  </ChildComponent>
</template>

动态 Slot 名

可以使用动态指令参数来定义动态 Slot 名称。

父组件:

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

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

缩写语法

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

父组件:

<template>
  <ChildComponent>
    <template #header>
      <h3>头部内容</h3>
    </template>
  </ChildComponent>
</template>

这些方法涵盖了 Vue 中 Slot 的主要使用场景，可以根据实际需求选择合适的方式实现组件间的灵活内容分发。