Vue3中插槽Slot的实现原理是怎样的？

本文共计2657个文字，预计阅读时间需要11分钟。

目录 + Vue官方对插槽的定义 + Slot究竟是什么 + 如何使用插槽 + 回顾组件渲染的原理 + 插槽的初始化原理 + 解析插槽中的内容 + 插槽的作用域原理 + 具名插槽原理 + 默认内容插槽原理 + Vue官方对插槽的扩展

目录

• Vue官方对插槽的定义
• Slot到底是什么
• 如何使用插槽
• 回顾组件渲染的原理
• 插槽的初始化原理
• 解析插槽中的内容
• 作用域插槽原理
• 具名插槽原理
• 默认内容插槽的原理

Vue官方对插槽的定义

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自Web Components 规范草案，将<slot>元素作为承载分发内容的出口。

Slot到底是什么

那么Slot到底是什么呢？Slot其实是一个接受父组件传过来的插槽内容，然后生成VNode并返回的函数。

我们一般是使用 <slot></slot> 这对标签进行接受父组件传过来的内容，那么这对标签最终编译之后是一个创建VNode的函数，我们可以叫做创建插槽VNode的函数。