10.3 具名插槽

往往我们需要灵活的使用插槽进行通用组件的开发，要求父组件每个模板对应子组件中每个插槽，这时我们可以使用<slot>的name属性，同样举个简单的例子。

  1. var child = {
  2.   template: `<div class="child"><slot name="header"></slot><slot name="footer"></slot></div>`,
  3. }
  4. var vm = new Vue({
  5.   el: '#app',
  6.   components: {
  7.     child
  8.   },
  9.   template: `<div id="app"><child><template v-slot:header><span>头部</span></template><template v-slot:footer><span>底部</span></template></child></div>`,
  10. })

渲染结果：

  1. <div class="child"><span>头部</span><span>底部</span></div>

接下来我们在普通插槽的基础上，看看源码在具名插槽实现上的区别。

10.3.1 模板编译的差别

父组件在编译AST阶段和普通节点的过程不同，具名插槽一般会在template模板中用v-slot:来标注指定插槽，这一阶段会在编译阶段特殊处理。最终的AST树会携带scopedSlots用来记录具名插槽的内容

  1. {
  2.   scopedSlots： {
  3.     footer: { ··· },
  4.     header: { ··· }
  5.   }
  6. }

AST生成render函数的过程也不详细分析了，我们只分析父组件最终返回的结果(如果对parse, generate感兴趣的同学，可以直接看源码分析,编译阶段冗长且难以讲解，跳过这部分分析)

  1. 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,其中第一个参数就是插槽数组。

  1. // vnode生成阶段针对具名插槽的处理 _u      (target._u = resolveScopedSlots)
  2.   function resolveScopedSlots (fns,res,hasDynamicKeys,contentHashKey) {
  3.     res = res || { $stable: !hasDynamicKeys };
  4.     for (var i = 0; i < fns.length; i++) {
  5.       var slot = fns[i];
  6.       // fn是数组需要递归处理。
  7.       if (Array.isArray(slot)) {
  8.         resolveScopedSlots(slot, res, hasDynamicKeys);
  9.       } else if (slot) {
  10.         // marker for reverse proxying v-slot without scope on this.$slots
  11.         if (slot.proxy) { //  针对proxy的处理
  12.           slot.fn.proxy = true;
  13.         }
  14.         // 最终返回一个对象，对象以slotname作为属性，以fn作为值
  15.         res[slot.key] = slot.fn;
  16.       }
  17.     }
  18.     if (contentHashKey) {
  19.       (res).$key = contentHashKey;
  20.     }
  21.     return res
  22.   }

最终父组件的vnode节点的data属性上多了scopedSlots数组。回顾一下，具名插槽和普通插槽实现上有明显的不同，普通插槽是以componentOptions.child的形式保留在父组件中，而具名插槽是以scopedSlots属性的形式存储到data属性中。

  1. // vnode
  2. {
  3.   scopedSlots: [{
  4.     'header': fn,
  5.     'footer': fn
  6.   }]
  7. }

10.3.3 子组件渲染Vnode过程

子组件在解析成AST树阶段的不同，在于对slot标签的name属性的解析,而在render生成Vnode过程中，slot的规范化处理针对具名插槽会进行特殊的处理，回到normalizeScopedSlots的代码

  1. vm.$scopedSlots = normalizeScopedSlots(
  2.   _parentVnode.data.scopedSlots, // 此时的第一个参数会拿到父组件插槽相关的数据
  3.   vm.$slots, // 记录父组件的插槽内容
  4.   vm.$scopedSlots
  5. );

最终子组件实例上的$scopedSlots属性会携带父组件插槽相关的内容。

  1. // 子组件Vnode
  2. {
  3.   $scopedSlots: [{
  4.     'header': f,
  5.     'footer': f
  6.   }]
  7. }

10.3.4 子组件渲染真实dom

和普通插槽类似，子组件渲染真实节点的过程会执行子render函数中的_t方法，这部分的源码会和普通插槽走不同的分支，其中this.$scopedSlots根据上面分析会记录着父组件插槽内容相关的数据，所以会和普通插槽走不同的分支。而最终的核心是执行nodes = scopedSlotFn(props),也就是执行function(){return [_c('span',[_v("头部")])]},具名插槽之所以是函数的形式执行而不是直接返回结果，我们在后面揭晓。

  1. function renderSlot (
  2.     name,
  3.     fallback, // slot插槽后备内容
  4.     props, // 子传给父的值
  5.     bindObject
  6.   ){
  7.     var scopedSlotFn = this.$scopedSlots[name];
  8.     var nodes;
  9.     // 针对具名插槽，特点是$scopedSlots有值
  10.     if (scopedSlotFn) { // scoped slot
  11.       props = props || {};
  12.       if (bindObject) {
  13.         if (!isObject(bindObject)) {
  14.           warn('slot v-bind without argument expects an Object',this);
  15.         }
  16.         props = extend(extend({}, bindObject), props);
  17.       }
  18.       // 执行时将子组件传递给父组件的值传入fn
  19.       nodes = scopedSlotFn(props) || fallback;
  20.     }···
  21.   }

至此子组件通过slotName找到了对应父组件的插槽内容。