欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入淺析Vue中的slots/scoped slots

 更新時間:2018年04月03日 11:59:19   作者:前端流浪者  
這篇文章主要介紹了Vue中的slots/scoped slots,本文實例代碼相結合的形式給大家介紹了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創(chuàng)建文本VNode的函數
  return _c('ul', 
    [_c('dx-li', [_vm._v("hello juejin!")])],
    1)
 },
 staticRenderFns: []
}

傳遞的插槽內容'hello juejin!'會被編譯成dx-li子組件VNode節(jié)點的子節(jié)點。

渲染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節(jié)點;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
 }
 // 遍歷父組件節(jié)點的孩子節(jié)點
 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節(jié)點data = {attrs:{slot: "abc"}, slot: "abc"},所以這里刪除該節(jié)點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
}

然后掛載dx-li組件時,會調用dx-li組件render函數,在此過程中會調用renderSlot函數:

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
  }
 }

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
}

子組件的后續(xù)渲染過程與slots類似。scoped slots原理與slots基本是一致,不同的是編譯父組件模板時,會生成一個返回結果為VNode的函數。當子組件匹配到父組件傳遞作用域插槽函數時,調用該函數生成對應VNode。

總結

其實slots/scoped slots 原理是非常簡單的,我們只需明白一點vue在渲染組件時,是根據VNode渲染實際DOM元素的。

slots是將父組件編譯生成的插槽VNode,在渲染子組件時,放置到對應子組件渲染VNode樹中。

scoped slots是將父組件中插槽內容編譯成一個函數,在渲染子組件時,傳入子組件props,生成對應的VNode。最后子組件,根據組件render函數返回VNode節(jié)點樹,update渲染真實DOM元素。同時,可以看出跨組件傳遞插槽也是可以的,但是必須注意具名插槽傳遞。

相關文章

  • vue實現tab欄點擊高亮效果

    vue實現tab欄點擊高亮效果

    這篇文章主要為大家詳細介紹了vue實現tab欄點擊高亮效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • Vue實現微信支付功能遇到的坑

    Vue實現微信支付功能遇到的坑

    這篇文章主要介紹了Vue實現微信支付功能遇到的坑,本文是小編記錄整理下拉的,以便日后所需,需要的朋友可以參考下
    2019-06-06
  • Vue組件高級通訊之$attrs與$listeners

    Vue組件高級通訊之$attrs與$listeners

    這篇文章主要為大家介紹了Vue組件高級通訊之$attrs與$listeners使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • vue實現固定位置顯示功能

    vue實現固定位置顯示功能

    這篇文章主要介紹了vue實現固定位置顯示功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue如何用this.$set改變數組里的某個值

    Vue如何用this.$set改變數組里的某個值

    這篇文章主要介紹了Vue用this.$set改變數組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數組和對象的值,需要的朋友可以參考下
    2022-12-12
  • vue-自定義組件傳值的實例講解

    vue-自定義組件傳值的實例講解

    今天小編就為大家分享一篇vue-自定義組件傳值的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue原生方法自定義右鍵菜單

    vue原生方法自定義右鍵菜單

    這篇文章主要為大家詳細介紹了vue原生方法自定義右鍵菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 簡單聊一聊vue中data的代理和監(jiān)聽

    簡單聊一聊vue中data的代理和監(jiān)聽

    這篇文章主要給大家介紹了關于vue中data的代理和監(jiān)聽的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下
    2022-09-09
  • Vue computed與watch用法區(qū)分

    Vue computed與watch用法區(qū)分

    watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數據發(fā)生變化的時候,所有依賴這個數據的相關數據會自動發(fā)生變化,即自動調用相關的函數,來實現數據的變動,這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同,感興趣的朋友一起看看吧
    2023-02-02
  • Vue項目前端部署詳細步驟(nginx方式)

    Vue項目前端部署詳細步驟(nginx方式)

    Nginx(engine x)是一個高性能的HTTP和反向代理web服務器,是部署前端項目的首選,這篇文章主要給大家介紹了關于Vue項目前端部署(nginx方式)的相關資料,需要的朋友可以參考下
    2023-09-09

最新評論