vue官方对插槽的定义vue 实现了一套内容分发的 api，这套 api 的设计灵感源自 web components 规范草案，将 58cb293b8600657fad49ec2c8d37b472 元素作为承载分发内容的出口。
slot到底是什么那么slot到底是什么呢？slot其实是一个接受父组件传过来的插槽内容，然后生成vnode并返回的函数。
我们一般是使用 58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee 这对标签进行接受父组件传过来的内容，那么这对标签最终编译之后是一个创建vnode的函数，我们可以叫做创建插槽vnode的函数。
// <slot></slot>标签被vue3编译之后的内容export function render(_ctx, _cache, $props, $setup, $data, $options) { return _renderslot(_ctx.$slots, "default")}
我们可以清楚看到<slot></slot>标签被vue3编译之后的就变成了一个叫_renderslot的函数。
如何使用插槽要使用插槽那就必须存在父子组件。
假设父组件为一下内容：
<todo-button> add todo</todo-button>
我们在父组件使用了一个todo-button的子组件，并且传递了add todo的插槽内容。
todo-button子组件模版内容
<button class="btn-primary"> <slot></slot></button>
当组件渲染的时候，<slot></slot> 将会被替换为“add todo”。
回顾组件渲染的原理那么这其中底层的原理是什么呢？在理解插槽的底层原理之前，我们还需要回顾一下vue3的组件运行原理。
组件的核心是它能够产出一坨vnode。对于 vue 来说一个组件的核心就是它的渲染函数，组件的挂载本质就是执行渲染函数并得到要渲染的vnode，至于什么data/props/computed 这都是为渲染函数产出 vnode 过程中提供数据来源服务的，最关键的就是组件最终产出的vnode，因为这个才是需要渲染的内容。
插槽的初始化原理当vue3遇到vnode类型为组件时，会进入组件渲染流程。组件渲染的流程就是首先创建组件实例，然后初始化组件实例，在初始化组件实例的时候就会去处理slot相关的内容。
在源码的runtime-core\src\component.ts里面
在函数initslots里面初始化组件slot的相关内容
那么initslots函数长啥样，都干了些什么呢？
runtime-core\src\componentslots.ts
首先要判断该组件是不是slot组件，那么怎么判断该组件是不是slot组件呢？我们先要回去看一下上面父组件编译之后的代码：
export function render(_ctx, _cache, $props, $setup, $data, $options) { const _component_todo_button = _resolvecomponent("todo-button") return (_openblock(), _createblock(_component_todo_button, null, { default: _withctx(() => [ _createtextvnode(" add todo ") ], undefined, true), _: 1 /* stable */ }))}
我们可以看到slot组件的children内容是一个object类型，也就是下面这段代码：
{ default: _withctx(() => [ _createtextvnode(" add todo ") ], undefined, true), _: 1 /* stable */}
那么在创建这个组件的vnode的时候，就会去判断它的children是不是object类型，如果是object类型那么就往该组件的vnode的shapeflag上挂上一个slot组件的标记。
如果是通过模板编译过来的那么就是标准的插槽children,是带有_属性的，是可以直接放在组件实例上的slots属性。
如果是用户自己写的插槽对象，那么就没有_属性，那么就需要进行规范化处理，走normalizeobjectslots 。
如果用户搞骚操作不按规范走，那么就走normalizevnodeslots流程。
解析插槽中的内容我们先看看子组件编译之后的代码：
export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openblock(), _createelementblock("button", { class: "btn-primary" }, [ _renderslot(_ctx.$slots, "default") ]))}
上面我们也讲过了<slot></slot>标签被vue3编译之后的就变成了一个叫_renderslot的函数。
renderslot函数接受五个参数，第一个是实例上的插槽函数对象slots，第二个是插槽的名字，也就是将插槽内容渲染到指定位置 ，第三个是插槽作用域接收的props，第四个是插槽的默认内容渲染函数，第五个暂不太清楚什么意思。
作用域插槽原理作用域插槽是一种子组件传父组件的传参的方式，让插槽内容能够访问子组件中才有的数据 。
子组件模板
<slot username="coboy"></slot>
编译后的代码
export function render(_ctx, _cache, $props, $setup, $data, $options) { return _renderslot(_ctx.$slots, "default", { username: "coboy" })}
父组件模板
<todo-button> <template v-slot:default="slotprops"> {{ slotprops.username }} </template></todo-button>
编译后的代码
export function render(_ctx, _cache, $props, $setup, $data, $options) { const _component_todo_button = _resolvecomponent("todo-button") return (_openblock(), _createblock(_component_todo_button, null, { default: _withctx((slotprops) => [ _createtextvnode(_todisplaystring(slotprops.username), 1 /* text */) ]), _: 1 /* stable */ }))}
上面讲过renderslot函数，可以简单概括成下面的代码
export function renderslots(slots, name, props) { const slot = slots[name] if (slot) { if (typeof slot === 'function') { return createvnode(fragment, {}, slot(props)) } }}
slots是组件实例上传过来的插槽内容，其实就是这段内容
{ default: _withctx((slotprops) => [ _createtextvnode(_todisplaystring(slotprops.username), 1 /* text */) ]), _: 1 /* stable */}
name是default，那么slots[name]得到的就是下面这个函数
_withctx((slotprops) => [ _createtextvnode(_todisplaystring(slotprops.username), 1 /* text */)])
slot(props)就很明显是slot({ username: "coboy" })，这样就把子组件内的数据传到父组件的插槽内容中了。
具名插槽原理有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：
<div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> </footer></div>
对于这样的情况，<slot> 元素有一个特殊的 attribute：name。通过它可以为不同的插槽分配独立的 id，也就能够以此来决定内容应该渲染到什么地方：
<!--子组件--><div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer></div>
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<!--父组件--><base-layout> <template v-slot:header> <h2>header</h2> </template> <template v-slot:default> <p>default</p> </template> <template v-slot:footer> <p>footer</p> </template></base-layout>
父组件编译之后的内容：
export function render(_ctx, _cache, $props, $setup, $data, $options) { const _component_base_layout = _resolvecomponent("base-layout") return (_openblock(), _createblock(_component_base_layout, null, { header: _withctx(() => [ _createelementvnode("h2", null, "header") ]), default: _withctx(() => [ _createelementvnode("p", null, "default") ]), footer: _withctx(() => [ _createelementvnode("p", null, "footer") ]), _: 1 /* stable */ }))}
子组件编译之后的内容：
export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openblock(), _createelementblock("div", { class: "container" }, [ _createelementvnode("header", null, [ _renderslot(_ctx.$slots, "header") ]), _createelementvnode("main", null, [ _renderslot(_ctx.$slots, "default") ]), _createelementvnode("footer", null, [ _renderslot(_ctx.$slots, "footer") ]) ]))}
通过子组件编译之后的内容我们可以看到这三个slot渲染函数
_renderslot(_ctx.$slots, "header")
_renderslot(_ctx.$slots, "default")
_renderslot(_ctx.$slots, "footer")
然后我们再回顾一下renderslot渲染函数
// renderslots的简化export function renderslots(slots, name, props) { const slot = slots[name] if (slot) { if (typeof slot === 'function') { return createvnode(fragment, {}, slot(props)) } }}
这个时候我们就可以很清楚的知道所谓具名函数是通过renderslots渲染函数的第二参数去定位要渲染的父组件提供的插槽内容。父组件的插槽内容编译之后变成了一个object的数据类型。
{ header: _withctx(() => [ _createelementvnode("h2", null, "header") ]), default: _withctx(() => [ _createelementvnode("p", null, "default") ]), footer: _withctx(() => [ _createelementvnode("p", null, "footer") ]), _: 1 /* stable */}
默认内容插槽的原理我们可能希望这个 <button> 内绝大多数情况下都渲染“submit”文本。为了将“submit”作为备用内容，我们可以将它放在 <slot> 标签内
<button type="submit"> <slot>submit</slot></button>
现在当我们在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button></submit-button>
备用内容“submit”将会被渲染：
<button type="submit"> submit</button>
但是如果我们提供内容：
<submit-button> save</submit-button>
则这个提供的内容将会被渲染从而取代备用内容：
<button type="submit"> save</button>
这其中的原理是什么呢？我们先来看看上面默认内容插槽编译之后的代码
export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openblock(), _createelementblock("button", { type: "submit" }, [ _renderslot(_ctx.$slots, "default", {}, () => [ _createtextvnode("submit") ]) ]))}
我们可以看到插槽函数的内容是这样的
_renderslot(_ctx.$slots, "default", {}, () => [ _createtextvnode("submit")])
我们再回顾看一下renderslot函数
renderslot函数接受五个参数，第四个是插槽的默认内容渲染函数。
再通过renderslot函数的源码我们可以看到，
第一步，先获取父组件提供的内容插槽的内容，
在第二个步骤中，若父组件已提供插槽内容，则使用该插槽内容，否则执行默认的内容渲染函数以获取默认内容。
以上就是vue3插槽slot的实现原理是什么的详细内容。