Vue组件的另一个重要概念是插槽，它容许你以一种不同于严格的父子关系的形式组合组件。插槽为你提供了一个将内容搁置到新地位或使组件更通用的进口。这一节将围绕官网对插槽内容的介绍思路，依照一般插槽，具名插槽，再到作用域插槽的思路，逐渐深刻外在的实现原理,有对插槽应用不相熟的，能够先参考官网对插槽的介绍。
10.1 一般插槽
插槽将<slot></slot>作为子组件承载散发的载体，简略的用法如下
10.1.1 根底用法
var child = { template: `<div class="child"><slot></slot></div>`}var vm = new Vue({ el: '#app', components: { child }, template: `<div id="app"><child>test</child></div>`})// 最终渲染后果<div class="child">test</div>10.1.2 组件挂载原理
插槽的原理，贯通了整个组件零碎编译到渲染的过程，所以首先须要回顾一下对组件相干编译渲染流程，简略总结一下几点：
- 从根实例动手进行实例的挂载，如果有手写的
render函数，则间接进入$mount挂载流程。 - 只有
template模板则须要对模板进行解析，这里分为两个阶段，一个是将模板解析为AST树，另一个是依据不同平台生成执行代码，例如render函数。 $mount流程也分为两步，第一步是将render函数生成Vnode树，子组件会以vue-componet-为tag标记，另一步是把Vnode渲染成真正的DOM节点。- 创立实在节点过程中，如果遇到子的占位符组件会进行子组件的实例化过程，这个过程又将回到流程的第一步。
接下来咱们对slot的剖析将围绕这四个具体的流程开展，对组件流程的详细分析，能够参考深刻分析Vue源码 - 组件根底大节。
10.1.3 父组件解决
回到组件实例流程中，父组件会优先于子组件进行实例的挂载，模板的解析和render函数的生成阶段在解决上没有非凡的差别，这里就不开展剖析。接下来是render函数生成Vnode的过程，在这个阶段会遇到子的占位符节点(即：child),因而会为子组件创立子的Vnode。createComponent执行了创立子占位节点Vnode的过程。咱们把重点放在最终Vnode代码的生成。
// 创立子Vnode过程 function createComponent ( Ctor, // 子类结构器 data, context, // vm实例 children, // 父组件须要散发的内容 tag // 子组件占位符 ){ ··· // 创立子vnode，其中父保留的children属性会以选项的模式传递给Vnode var vnode = new VNode( ("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : '')), data, undefined, undefined, undefined, context, { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children }, asyncFactory ); }// Vnode结构器var VNode = function VNode (tag,data,children,text,elm,context,componentOptions,asyncFactory) { ··· this.componentOptions = componentOptions; // 子组件的选项相干}createComponent函数接管的第四个参数children就是父组件须要散发的内容。在创立子Vnode过程中，会以会componentOptions配置传入Vnode结构器中。最终Vnode中父组件须要散发的内容以componentOptions属性的模式存在，这是插槽剖析的第一步。
10.1.4 子组件流程
父组件的最初一个阶段是将Vnode渲染为真正的DOM节点，在这个过程中如果遇到子Vnode会优先实例化子组件并进行一系列子组件的渲染流程。子组件初始化会先调用init办法，并且和父组件不同的是，子组件会调用initInternalComponent办法拿到父组件领有的相干配置信息，并赋值给子组件本身的配置选项。
// 子组件的初始化Vue.prototype._init = function(options) { if (options && options._isComponent) { initInternalComponent(vm, options); } initRender(vm)}function initInternalComponent (vm, options) { var opts = vm.$options = Object.create(vm.constructor.options); var parentVnode = options._parentVnode; opts.parent = options.parent; opts._parentVnode = parentVnode; // componentOptions为子vnode记录的相干信息 var vnodeComponentOptions = parentVnode.componentOptions; opts.propsData = vnodeComponentOptions.propsData; opts._parentListeners = vnodeComponentOptions.listeners; // 父组件须要散发的内容赋值给子选项配置的_renderChildren opts._renderChildren = vnodeComponentOptions.children; opts._componentTag = vnodeComponentOptions.tag; if (options.render) { opts.render = options.render; opts.staticRenderFns = options.staticRenderFns; } }最终在子组件实例的配置中拿到了父组件保留的散发内容，记录在组件实例$options._renderChildren中，这是第二步的重点。
接下来是initRender阶段，在这个过程会将配置的_renderChildren属性做规范化解决，并将他赋值给子实例上的$slot属性，这是第三步的重点。
function initRender(vm) { ··· vm.$slots = resolveSlots(options._renderChildren, renderContext);// $slots拿到了子占位符节点的_renderchildren(即须要散发的内容)，保留作为子实例的属性}function resolveSlots (children,context) { // children是父组件须要散发到子组件的Vnode节点，如果不存在，则没有散发内容 if (!children || !children.length) { return {} } var slots = {}; for (var i = 0, l = children.length; i < l; i++) { var child = children[i]; var data = child.data; // remove slot attribute if the node is resolved as a Vue slot node if (data && data.attrs && data.attrs.slot) { delete data.attrs.slot; } // named slots should only be respected if the vnode was rendered in the // same context. // 分支1为具名插槽的逻辑，放后剖析 if ((child.context === context || child.fnContext === context) && data && data.slot != null ) { var name = data.slot; var slot = (slots[name] || (slots[name] = [])); if (child.tag === 'template') { slot.push.apply(slot, child.children || []); } else { slot.push(child); } } else { // 一般插槽的重点，外围逻辑是结构{ default: [children] }对象返回 (slots.default || (slots.default = [])).push(child); } } return slots }其中一般插槽的解决逻辑外围在(slots.default || (slots.default = [])).push(child);，即以数组的模式赋值给default属性，并以$slot属性的模式保留在子组件的实例中。
随后子组件也会走挂载的流程，同样会经验template模板到render函数，再到Vnode,最初渲染实在DOM的过程。解析AST阶段，slot标签和其余一般标签解决雷同，不同之处在于AST生成render函数阶段，对slot标签的解决，会应用_t函数进行包裹。这是关键步骤的第四步
子组件渲染的大抵流程简略梳理如下
// ast 生成 render函数var code = generate(ast, options);// generate实现function generate(ast, options) { var state = new CodegenState(options); var code = ast ? genElement(ast, state) : '_c("div")'; return { render: ("with(this){return " + code + "}"), staticRenderFns: state.staticRenderFns }}// genElement实现function genElement(el, state) { // 针对slot标签的解决走```genSlot```分支 if (el.tag === 'slot') { return genSlot(el, state) }}// 外围genSlot原理function genSlot (el, state) { // slotName记录着插槽的惟一标记名，默认为default var slotName = el.slotName || '"default"'; // 如果子组件的插槽还有子元素，则会递归调执行子元素的创立过程 var children = genChildren(el, state); // 通过_t函数包裹 var res = "_t(" + slotName + (children ? ("," + children) : ''); // 具名插槽的其余解决 ··· return res + ')' }最终子组件的render函数为： "with(this){return _c('div',{staticClass:"child"},[_t("default")],2)}"
第五步到了子组件渲染为Vnode的过程。render函数执行阶段会执行_t()函数，_t函数是renderSlot函数简写，它会在Vnode树中进行散发内容的替换，具体看看实现逻辑。
参考Vue3源码视频解说：进入学习
// target._t = renderSlot;// render函数渲染Vnode函数Vue.prototype._render = function() { var _parentVnode = ref._parentVnode; if (_parentVnode) { // slots的规范化解决并赋值给$scopedSlots属性。 vm.$scopedSlots = normalizeScopedSlots( _parentVnode.data.scopedSlots, vm.$slots, // 记录父组件的插槽内容 vm.$scopedSlots ); }}normalizeScopedSlots的逻辑较长，但并不是本节的重点。拿到$scopedSlots属性后会执行真正的render函数,其中_t的执行逻辑如下：
// 渲染slot组件内容 function renderSlot ( name, fallback, // slot插槽后备内容(针对后备内容) props, // 子传给父的值(作用域插槽) bindObject ) { // scopedSlotFn拿到父组件插槽的执行函数，默认slotname为default var scopedSlotFn = this.$scopedSlots[name]; var nodes; // 具名插槽分支(临时疏忽) if (scopedSlotFn) { // scoped slot props = props || {}; if (bindObject) { if (!isObject(bindObject)) { warn( 'slot v-bind without argument expects an Object', this ); } props = extend(extend({}, bindObject), props); } // 执行时将子组件传递给父组件的值传入fn nodes = scopedSlotFn(props) || fallback; } else { // 如果父占位符组件没有插槽内容，this.$slots不会有值，此时vnode节点为后备内容节点。 nodes = this.$slots[name] || fallback; } var target = props && props.slot; if (target) { return this.$createElement('template', { slot: target }, nodes) } else { return nodes } }renderSlot执行过程会拿到父组件须要散发的内容，最终Vnode树将父元素的插槽替换掉子组件的slot组件。
最初一步就是子组件实在节点的渲染了，这点没有什么特地点，和以往介绍的流程统一。
至此，一个残缺且简略的插槽流程剖析结束。接下来看插槽深层次的用法。
10.2 具备后备内容的插槽
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。查看源码发现后备内容插槽的逻辑也很好了解。
var child = { template: `<div class="child"><slot>后备内容</slot></div>`}var vm = new Vue({ el: '#app', components: { child }, template: `<div id="app"><child></child></div>`})// 父没有插槽内容，子的slot会渲染后备内容<div class="child">后备内容</div>父组件没有须要散发的内容，子组件会默认显示插槽外面的内容。源码中的不同体现在上面的几点。
- 父组件渲染过程因为没有须要散发的子节点，所以不再须要领有
componentOptions.children属性来记录内容。 - 因而子组件也拿不到
$slot属性的内容. - 子组件的
render函数最初在_t函数参数会携带第二个参数，该参数以数组的模式传入slot插槽的后备内容。例with(this){return _c('div',{staticClass:"child"},[_t("default",[_v("test")])],2)} - 渲染子
Vnode会执行renderSlot(_t)函数时，第二个参数fallback有值，且this.$slots没值，vnode会间接返回后备内容作为渲染对象。
function renderSlot ( name, fallback, // slot插槽后备内容(针对后备内容) props, // 子传给父的值(作用域插槽) bindObject){ if() { ··· }else{ //fallback为后备内容 // 如果父占位符组件没有插槽内容，this.$slots不会有值，此时vnode节点为后备内容节点。 nodes = this.$slots[name] || fallback; }}最终，在父组件没有提供内容时，slot的后备内容被渲染。
有了这些根底，咱们再来看官网给的一条规定。
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
父组件模板的内容在父组件编译阶段就确定了,并且保留在componentOptions属性中，而子组件有本身初始化init的过程，这个过程同样会进行子作用域的模板编译，因而两局部内容是绝对独立的。
10.3 具名插槽
往往咱们须要灵便的应用插槽进行通用组件的开发，要求父组件每个模板对应子组件中每个插槽，这时咱们能够应用<slot>的name属性，同样举个简略的例子。
var child = { template: `<div class="child"><slot name="header"></slot><slot name="footer"></slot></div>`,}var vm = new Vue({ el: '#app', components: { child }, template: `<div id="app"><child><template v-slot:header><span>头部</span></template><template v-slot:footer><span>底部</span></template></child></div>`,})渲染后果：
<div class="child"><span>头部</span><span>底部</span></div>接下来咱们在一般插槽的根底上，看看源码在具名插槽实现上的区别。
10.3.1 模板编译的差异
父组件在编译AST阶段和一般节点的过程不同，具名插槽个别会在template模板中用v-slot:来标注指定插槽，这一阶段会在编译阶段非凡解决。最终的AST树会携带scopedSlots用来记录具名插槽的内容
{ scopedSlots： { footer: { ··· }, header: { ··· } }}AST生成render函数的过程也不详细分析了，咱们只剖析父组件最终返回的后果(如果对parse, generate感兴趣的同学，能够间接看源码剖析,编译阶段简短且难以解说，跳过这部分剖析)
with(this){return _c('div',{attrs:{"id":"app"}},[_c('child',{scopedSlots:_u([{key:"header",fn:function(){return [_c('span',[_v("头部")])]},proxy:true},{key:"footer",fn:function(){return [_c('span',[_v("底部")])]},proxy:true}])})],1)}很显著，父组件的插槽内容用_u函数封装成数组的模式，并赋值到scopedSlots属性中，而每一个插槽以对象模式形容，key代表插槽名，fn是一个返回执行后果的函数。
10.3.2 父组件vnode生成阶段
照例进入父组件生成Vnode阶段，其中_u函数的原形是resolveScopedSlots,其中第一个参数就是插槽数组。
// vnode生成阶段针对具名插槽的解决 _u (target._u = resolveScopedSlots) function resolveScopedSlots (fns,res,hasDynamicKeys,contentHashKey) { res = res || { $stable: !hasDynamicKeys }; for (var i = 0; i < fns.length; i++) { var slot = fns[i]; // fn是数组须要递归解决。 if (Array.isArray(slot)) { resolveScopedSlots(slot, res, hasDynamicKeys); } else if (slot) { // marker for reverse proxying v-slot without scope on this.$slots if (slot.proxy) { // 针对proxy的解决 slot.fn.proxy = true; } // 最终返回一个对象，对象以slotname作为属性，以fn作为值 res[slot.key] = slot.fn; } } if (contentHashKey) { (res).$key = contentHashKey; } return res }最终父组件的vnode节点的data属性上多了scopedSlots数组。回顾一下，具名插槽和一般插槽实现上有显著的不同，一般插槽是以componentOptions.child的模式保留在父组件中，而具名插槽是以scopedSlots属性的模式存储到data属性中。
// vnode{ scopedSlots: [{ 'header': fn, 'footer': fn }]}10.3.3 子组件渲染Vnode过程
子组件在解析成AST树阶段的不同，在于对slot标签的name属性的解析,而在render生成Vnode过程中，slot的规范化解决针对具名插槽会进行非凡的解决，回到normalizeScopedSlots的代码
vm.$scopedSlots = normalizeScopedSlots( _parentVnode.data.scopedSlots, // 此时的第一个参数会拿到父组件插槽相干的数据 vm.$slots, // 记录父组件的插槽内容 vm.$scopedSlots);最终子组件实例上的$scopedSlots属性会携带父组件插槽相干的内容。
// 子组件Vnode{ $scopedSlots: [{ 'header': f, 'footer': f }]}10.3.4 子组件渲染实在dom
和一般插槽相似，子组件渲染实在节点的过程会执行子render函数中的_t办法，这部分的源码会和一般插槽走不同的分支，其中this.$scopedSlots依据下面剖析会记录着父组件插槽内容相干的数据，所以会和一般插槽走不同的分支。而最终的外围是执行nodes = scopedSlotFn(props),也就是执行function(){return [_c('span',[_v("头部")])]},具名插槽之所以是函数的模式执行而不是间接返回后果，咱们在前面揭晓。
function renderSlot ( name, fallback, // slot插槽后备内容 props, // 子传给父的值 bindObject ){ var scopedSlotFn = this.$scopedSlots[name]; var nodes; // 针对具名插槽，特点是$scopedSlots有值 if (scopedSlotFn) { // scoped slot props = props || {}; if (bindObject) { if (!isObject(bindObject)) { warn('slot v-bind without argument expects an Object',this); } props = extend(extend({}, bindObject), props); } // 执行时将子组件传递给父组件的值传入fn nodes = scopedSlotFn(props) || fallback; }··· }至此子组件通过slotName找到了对应父组件的插槽内容。
10.4 作用域插槽
最初说说作用域插槽，咱们能够利用作用域插槽让父组件的插槽内容拜访到子组件的数据，具体的用法是在子组件中以属性的形式记录在子组件中，父组件通过v-slot:[name]=[props]的模式拿到子组件传递的值。子组件<slot>元素上的个性称为插槽Props,另外，vue2.6当前的版本曾经弃用了slot-scoped，采纳v-slot代替。
var child = { template: `<div><slot :user="user"></div>`, data() { return { user: { firstname: 'test' } } }}var vm = new Vue({ el: '#app', components: { child }, template: `<div id="app"><child><template v-slot:default="slotProps">{{slotProps.user.firstname}}</template></child></div>`})作用域插槽和具名插槽的原理相似，咱们接着往下看。
10.4.1 父组件编译阶段
作用域插槽和具名插槽在父组件的用法基本相同，区别在于v-slot定义了一个插槽props的名字，参考对于具名插槽的剖析，生成render函数阶段fn函数会携带props参数传入。即： with(this){return _c('div',{attrs:{"id":"app"}},[_c('child',{scopedSlots:_u([{key:"default",fn:function(slotProps){return [_v(_s(slotProps.user.firstname))]}}])})],1)}
10.4.2 子组件渲染
在子组件编译阶段，:user="user"会以属性的模式解析，最终在render函数生成阶段以对象参数的模式传递_t函数。 with(this){return _c('div',[_t("default",null,{"user":user})],2)}
子组件渲染Vnode阶段，依据后面剖析会执行renderSlot函数，这个函数后面剖析过，对于作用域插槽的解决，集中体现在函数传入的第三个参数。
// 渲染slot组件vnodefunction renderSlot( name, fallback, props, // 子传给父的值 { user: user } bindObject) { // scopedSlotFn拿到父组件插槽的执行函数，默认slotname为default var scopedSlotFn = this.$scopedSlots[name]; var nodes; // 具名插槽分支 if (scopedSlotFn) { // scoped slot props = props || {}; if (bindObject) { if (!isObject(bindObject)) { warn( 'slot v-bind without argument expects an Object', this ); } // 合并props props = extend(extend({}, bindObject), props); } // 执行时将子组件传递给父组件的值传入fn nodes = scopedSlotFn(props) || fallback; }最终将子组件的插槽props作为参数传递给执行函数执行。回过头看看为什么具名插槽是函数的模式执行而不是间接返回后果。学完作用域插槽咱们发现这就是设计奇妙的中央，函数的模式让执行过程更加灵便，作用域插槽只须要以参数的模式将插槽props传入便能够失去想要的后果。
10.4.3 思考
作用域插槽这个概念一开始我很难了解，单纯从定义和源码的论断上看，父组件的插槽内容能够拜访到子组件的数据，这不是显著的子父之间的信息通信吗，在事件章节咱们晓得，子父组件之间的通信齐全能够通过事件$emit,$on的模式来实现，那么为什么还须要减少一个插槽props的概念呢。
咱们看看作者的解释。
插槽 prop 容许咱们将插槽转换为可复用的模板，这些模板能够基于输出的 prop 渲染出不同的内容
从我本身的角度了解，作用域插槽提供了一种形式，当你须要封装一个通用，可复用的逻辑模块，并且这个模块给内部使用者提供了一个便当，容许你在应用组件时自定义局部布局，这时候作用域插槽就派上大用场了