<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: []}

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: []}

function initRender (vm) { ... // 其中_renderChildren數組，存儲為 'hello juejin!'的VNode節點；renderContext一般為父組件Vue實例 這里為dx-ul組件實例 vm.$slots = resolveSlots(options._renderChildren, renderContext); ...}

/** * 主要作用是將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}

export function renderSlot (  name: string, // 子組件中slot的name，匿名default  fallback: ?Array<VNode>, // 子組件插槽中默認內容VNode數組，如果沒有插槽內容，則顯示該內容  props: ?Object, // 子組件傳遞到插槽的props  bindObject: ?Object // 針對<slot v-bind="obj"></slot> obj必須是一個對象 ): ?Array<VNode> { // 判斷父組件是否傳遞作用域插槽  const scopedSlotFn = this.$scopedSlots[name]  let nodes  if (scopedSlotFn) { // scoped slot  props = props || {}  if (bindObject) {   if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {   warn(    'slot v-bind without argument expects an Object',    this   )   }   props = extend(extend({}, bindObject), props)  }  // 傳入props生成相應的VNode  nodes = scopedSlotFn(props) || fallback  } else {  // 如果父組件沒有傳遞作用域插槽  const slotNodes = this.$slots[name]  // warn duplicate slot usage  if (slotNodes) {   if (process.env.NODE_ENV !== 'production' && slotNodes._rendered) {   warn(    `Duplicate presence of slot "${name}" found in the same render tree ` +    `- this will likely cause render errors.`,    this   )   }   // 設置父組件傳遞插槽的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  } }

<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: [] }

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}