vue插槽怎么实现的

Vue 插槽的实现方式

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

默认插槽

子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换子组件中的 <slot>。

<!-- 子组件 Child.vue -->
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

<!-- 父组件 -->
<Child>
  <p>父组件传递的内容</p>
</Child>

具名插槽

通过 name 属性为插槽命名，父组件使用 v-slot 指令指定内容分发的目标插槽。

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 -->
<Child>
  <template v-slot:header>
    <h1>头部内容</h1>
  </template>
  <p>默认插槽内容</p>
  <template v-slot:footer>
    <p>底部内容</p>
  </template>
</Child>

作用域插槽

子组件通过插槽属性向父组件传递数据，父组件通过 v-slot 接收数据。

<!-- 子组件 -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Alice' }
    }
  }
}
</script>

<!-- 父组件 -->
<Child>
  <template v-slot:default="slotProps">
    <p>{{ slotProps.user.name }}</p>
  </template>
</Child>

动态插槽名

使用动态指令参数指定插槽名称。

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

插槽的实现原理

Vue 的插槽功能基于以下核心机制：

1. 编译阶段：Vue 编译器将父组件的插槽内容编译为特殊的渲染函数。
2. 作用域处理：子组件的插槽内容能够访问子组件的作用域，而父组件的插槽内容只能访问父组件的作用域。
3. 虚拟 DOM 比对：在渲染过程中，Vue 会将插槽内容正确地插入到子组件的对应位置。

注意事项

• 默认插槽的 v-slot 可以简写为 #default。
• 作用域插槽的解构赋值：v-slot="{ user }"。
• 废弃的语法：slot 属性（2.6.0+ 使用 v-slot 替代）。