vue插槽实现原理

Vue 插槽的实现原理

Vue 插槽（Slot）的核心原理是基于编译时的模板转换和运行时的作用域处理。插槽允许父组件向子组件传递模板片段，子组件通过插槽出口（<slot>）渲染这些内容。

编译阶段处理

Vue 的模板编译器会将插槽相关语法转换为渲染函数代码：

• 父组件中通过 v-slot 或默认插槽传递的内容会被编译为函数形式，保存在子组件的 $slots 或 $scopedSlots 中。
• 子组件中的 <slot> 标签会被编译为对 $slots 或 $scopedSlots 的调用。

例如以下父组件模板：

<child-component>
  <template v-slot:default>插槽内容</template>
</child-component>

会被编译为类似：

h('child-component', {
  scopedSlots: {
    default: () => '插槽内容'
  }
})

运行时处理

在子组件实例化时：

• 普通插槽内容会被挂载到 vm.$slots，作用域在父组件中确定。
• 作用域插槽内容会被挂载到 vm.$scopedSlots，以函数形式接收子组件传递的数据。

子组件的 <slot> 会被转换为对 $slots 的调用：

// 编译后的渲染函数
render(h) {
  return h('div', this.$slots.default)
}

作用域插槽实现

作用域插槽允许子组件向插槽传递数据，编译后会生成接收参数的函数：

<!-- 父组件 -->
<child-component>
  <template v-slot:default="slotProps">{{ slotProps.text }}</template>
</child-component>

<!-- 子组件 -->
<slot :text="message"></slot>

编译后的代码类似：

// 父组件渲染函数
h('child-component', {
  scopedSlots: {
    default: (props) => props.text
  }
})

// 子组件渲染函数
h('div', this.$scopedSlots.default({ text: this.message }))

更新机制

当插槽内容依赖响应式数据时：

• 普通插槽在父组件更新时重新生成整个 VNode。
• 作用域插槽在子组件更新时重新调用插槽函数，但函数本身只有在父组件更新时才会变化。

这种设计保证了性能优化，避免不必要的重新渲染。