vue插槽怎么实现的

Vue 插槽的实现方式

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

默认插槽

子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换该标签。若父组件未提供内容，则显示 <slot> 内的默认内容。

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

<!-- 父组件 -->
<Child>
  <p>替换默认内容</p>
</Child>

具名插槽

通过 name 属性为插槽命名，实现多插槽内容分发。父组件使用 v-slot 指令或 # 缩写指定插槽名。

<!-- 子组件 Layout.vue -->
<template>
  <div>
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>

<!-- 父组件 -->
<Layout>
  <template #header>
    <h1>标题</h1>
  </template>
  <p>主内容</p>
</Layout>

作用域插槽

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

<!-- 子组件 ScopedSlot.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<!-- 父组件 -->
<ScopedSlot :items="list">
  <template v-slot="{ item }">
    <span>{{ item.text }}</span>
  </template>
</ScopedSlot>

动态插槽名

通过动态指令参数绑定插槽名，实现灵活的内容分发。

<template>
  <Child>
    <template #[dynamicSlotName]>
      动态内容
    </template>
  </Child>
</template>

插槽原理

Vue 在编译阶段会将插槽内容转化为函数，子组件通过调用这些函数渲染内容。作用域插槽本质上是向函数传递参数。虚拟 DOM 比对时，插槽内容会被视为子组件的子节点。

注意事项

• 插槽内容在父组件作用域编译，但作用域插槽可访问子组件数据。
• v-slot 只能用于 <template> 或组件标签。
• Vue 3 统一了 slot 和 slot-scope 语法为 v-slot。