Vue中slots/scoped使用詳解

這次帶給大家Vue中slots/scoped使用詳解，Vue中slots/scoped使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

下面結合一個例子，簡單說明slots的工作原理

#dx-li子元件的template如下：

     你好！  

dx-ul父组件的template如下：

    hello juejin!  

结合上述例子以及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  
 * 编译成span的VNode节点data = {attrs:{slot: "abc"}, slot: "abc"},所以这里删除该节点attrs的slot
 */
 if (data && data.attrs && data.attrs.slot) {
  delete data.attrs.slot
 }
 /* 判断是否为具名插槽，如果为具名插槽，还需要子组件/函数子组件渲染上下文一致。主要作用：
 *当需要向子组件的子组件传递具名插槽时，不会保持插槽的名字。
 * 举个栗子：
 * child组件template: 
 * <p>
 * </p>
<p><slot></slot></p>
 * <p><slot></slot></p>
 * 
 * parent组件template:
 * <child><slot></slot></child>
 * main组件template:
 * <parent><span>foo</span></parent>
 * 此时main渲染的结果：
 * <p>
 * </p>
<p><span>foo</span></p>
   <p></p>
 * 
 */
 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
}</vnode></vnode>

然後掛載dx-li元件時，會呼叫dx-li元件render函數，在此過程中會呼叫renderSlot函數：

export function renderSlot (
  name: string, // 子组件中slot的name，匿名default
  fallback: ?Array<vnode>, // 子组件插槽中默认内容VNode数组，如果没有插槽内容，则显示该内容
  props: ?Object, // 子组件传递到插槽的props
  bindObject: ?Object // 针对<slot></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组件: <p><slot></slot></p>
  * Foo组件：<p><bar><slot></slot></bar></p>
  * main组件：<p><foo>hello</foo></p>
  * 最终渲染：<p></p>
<p>hello</p>
  */
  const target = props && props.slot
  if (target) {
  return this.$createElement('template', { slot: target }, nodes)
  } else {
  return nodes
  }
 }</vnode></vnode>

scoped slots理解

dx-li子元件的template如下：

      hello juejin!  

dx-ul父组件的template如下：

        {{scope.str}}     

结合例子和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 <p style="text-align: left;">子元件的後續渲染過程與slots類似。 scoped slots原理與slots基本上一致，不同的是編譯父元件模板時，會產生一個傳回結果為VNode的函數。當子元件比對到父元件傳遞作用域插槽函數時，呼叫該函數產生對應VNode。 </p><p style="text-align: left;"><span style="color: #ff0000"><strong>總結</strong></span></p><p style="text-align: left;">其實slots/scoped slots 原理是很簡單的，我們只需明白一點vue在渲染元件時，是根據VNode渲染實際DOM元素的。 </p><p style="text-align: left;">slots是將父元件編譯產生的插槽VNode，在渲染子元件時，放置到對應子元件渲染VNode樹。 </p><p style="text-align: left;">scoped slots是將父元件中插槽內容編譯成一個函數，在渲染子元件時，傳入子元件props，產生對應的VNode。最後子元件，根據元件render函數傳回VNode節點樹，update渲染真實DOM元素。同時，可以看出跨組件傳遞插槽也是可以的，但必須注意具名插槽傳遞。 </p><p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p><p>推薦閱讀：</p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394904.html" target="_blank">怎麼讓頁面程式碼分割並且按需載入</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394902.html" target="_blank">#vue元件中slot插口使用詳解</a><br></p>

以上是Vue中slots/scoped使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！