vue实现slot

Vue 中 Slot 的实现方法

在 Vue 中，slot 是一种内容分发机制，允许父组件向子组件传递模板内容。以下是几种常见的 slot 实现方式：

默认 Slot

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

子组件模板：

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

父组件使用：

<child-component>
  <p>这是插入到子组件的内容</p>
</child-component>

具名 Slot

具名 slot 允许父组件针对子组件中不同的 slot 位置分发内容。

子组件模板：

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

父组件使用：

<child-component>
  <template v-slot:header>
    <h1>页眉内容</h1>
  </template>

  <p>默认 slot 内容</p>

  <template v-slot:footer>
    <p>页脚内容</p>
  </template>
</child-component>

作用域 Slot

作用域 slot 允许子组件将数据传递给父组件中的插槽内容。

子组件模板：

<ul>
  <li v-for="item in items" :key="item.id">
    <slot :item="item"></slot>
  </li>
</ul>

父组件使用：

<child-component>
  <template v-slot:default="slotProps">
    <span>{{ slotProps.item.name }}</span>
  </template>
</child-component>

动态 Slot 名

Vue 2.6.0+ 支持动态 slot 名称。

父组件使用：

<child-component>
  <template v-slot:[dynamicSlotName]>
    <!-- 内容 -->
  </template>
</child-component>

缩写语法

Vue 提供了简写语法来简化 slot 的使用。

具名 slot 缩写：

<template #header>
  <h1>页眉内容</h1>
</template>

作用域 slot 缩写：

<template #default="{ item }">
  <span>{{ item.name }}</span>
</template>

注意事项

• 在 Vue 2 中，v-slot 指令只能用在 <template> 上，Vue 3 中可以用在普通元素上
• 默认 slot 可以使用 v-slot:default 显式声明
• 作用域 slot 的解构语法与 JavaScript 对象解构类似
• 动态 slot 名称需要放在方括号中