深入浅析Vue中的slots/scoped slots

一直对Vue中的slot插槽比较感兴趣，下面是自己的一些简单理解，希望可以帮助大家更好的理解slot插槽

下面结合一个例子，简单说明slots的工作原理

dx-li子组件的template如下：

<li class="dx-li"> <slot>   你好！ </slot></li>dx-ul父组件的template如下：<ul> <dx-li>  hello juejin! </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;  // 其中_vm.v为createTextVNode创建文本VNode的函数  return _c('ul',     [_c('dx-li', [_vm._v("hello juejin!")])],    1) }, staticRenderFns: []}

传递的插槽内容'hello juejin!'会被编译成dx-li子组件VNode节点的子节点。

渲染dx-li子组件，其中子组件的render函数：

module.exports={ render:function (){  var _vm=this;  var _h=_vm.$createElement;  var _c=_vm._self._c||_h;  // 其中_vm._v 函数为renderSlot函数  return _c('li',     {staticClass: "dx-li" },     [_vm._t("default", [_vm._v("你好 掘金！")])],     2   )  }, staticRenderFns: []}

初始化dx-li子组件vue实例过程中，会调用initRender函数：

function initRender (vm) { ... // 其中_renderChildren数组，存储为 'hello juejin!'的VNode节点；renderContext一般为父组件Vue实例 这里为dx-ul组件实例 vm.$slots = resolveSlots(options._renderChildren, renderContext); ...}

其中resolveSlots函数为：

/** * 主要作用是将children VNodes转化成一个slots对象. */export function resolveSlots ( children: ?Array<VNode>, context: ?Component): { [key: string]: Array<VNode> } { const slots = {} // 判断是否有children，即是否有插槽VNode if (!children) { return slots } // 遍历父组件节点的孩子节点 for (let i = 0, l = children.length; i < l; i++) { const child = children[i] // data为VNodeData，保存父组件传递到子组件的props以及attrs等 const data = child.data /* 移除slot属性 * <span slot="abc"></span>  * 编译成span的VNode节点data = {attrs:{slot: "abc"}, slot: "abc"},所以这里删除该节点attrs的slot */ if (data && data.attrs && data.attrs.slot) {  delete data.attrs.slot } /* 判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用： *当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。 * 举个栗子： * child组件template:  * <div> * <div class="default"><slot></slot></div> * <div class="named"><slot name="foo"></slot></div> * </div> * parent组件template: * <child><slot name="foo"></slot></child> * main组件template: * <parent><span slot="foo">foo</span></parent> * 此时main渲染的结果： * <div> * <div class="default"><span slot="foo">foo</span></div>   <div class="named"></div> * </div> */ if ((child.context === context || child.fnContext === context) &&  data && data.slot != null ) {  const name = data.slot  const slot = (slots[name] || (slots[name] = []))  // 这里处理父组件采用template形式的插槽  if (child.tag === 'template') {  slot.push.apply(slot, child.children || [])  } else {  slot.push(child)  } } else {  // 返回匿名default插槽VNode数组  (slots.default || (slots.default = [])).push(child) } } // 忽略仅仅包含whitespace的插槽 for (const name in slots) { if (slots[name].every(isWhitespace)) {  delete slots[name] } } return slots}