深入浅析Vue中的slots/scoped slots

)
}
// 设置父组件传递插槽的VNode._rendered，用于后面判断是否有重名slot
slotNodes._rendered = true
}
// 如果没有传入插槽，则为默认插槽内容VNode
nodes = slotNodes || fallback
}
// 如果还需要向子组件的子组件传递slot
/*举个栗子：
* Bar组件: <div class="bar"><slot name="foo"/></div>
* Foo组件：<div class="foo"><bar><slot slot="foo"/></bar></div>
* main组件：<div><foo>hello</foo></div>
* 最终渲染：<div class="foo"><div class="bar">hello</div></div>
*/
const target = props && props.slot
if (target) {
return this.$createElement('template', { slot: target }, nodes)
} else {
return nodes
}
}

scoped slots理解

dx-li子组件的template如下：

<li class="dx-li">
 <slot str="你好 掘金！">
  hello juejin!
 </slot>
</li>
dx-ul父组件的template如下：
<ul>
 <dx-li>
  <span slot-scope="scope">
   {{scope.str}}
  </span>
 </dx-li>
</ul>
结合例子和Vue源码简单作用域插槽
dx-ul父组件中template编译后，产生组件render函数：
module.exports={
 render:function (){
  var _vm=this;
  var _h=_vm.$createElement;
  var _c=_vm._self._c||_h;
   return _c('ul', [_c('dx-li', {
   // 可以编译生成一个对象数组
   scopedSlots: _vm._u([{
    key: "default",
    fn: function(scope) {
    return _c('span',
     {},
     [_vm._v(_vm._s(scope.str))]    )
    }
   }])
   })], 1)
  },
 staticRenderFns: [] }

其中 _vm._u函数：

function resolveScopedSlots (
 fns, // 为一个对象数组，见上文scopedSlots
 res
) {
 res = res || {};
 for (var i = 0; i < fns.length; i++) {
  if (Array.isArray(fns[i])) {
   // 递归调用
   resolveScopedSlots(fns[i], res);
  } else {
   res[fns[i].key] = fns[i].fn;
  }
 }
 return res
}

子组件的后续渲染过程与slots类似。scoped slots原理与slots基本是一致，不同的是编译父组件模板时，会生成一个返回结果为VNode的函数。当子组件匹配到父组件传递作用域插槽函数时，调用该函数生成对应VNode。

总结

其实slots/scoped slots 原理是非常简单的，我们只需明白一点vue在渲染组件时，是根据VNode渲染实际DOM元素的。

slots是将父组件编译生成的插槽VNode，在渲染子组件时，放置到对应子组件渲染VNode树中。

scoped slots是将父组件中插槽内容编译成一个函数，在渲染子组件时，传入子组件props，生成对应的VNode。最后子组件，根据组件render函数返回VNode节点树，update渲染真实DOM元素。同时，可以看出跨组件传递插槽也是可以的，但是必须注意具名插槽传递。