Vue.js 源碼分析(二十六) 高級應用做用域插槽詳解

時間 2020-07-20

標籤 vue.js vue 源碼分析二十六高級應用插槽詳解欄目 JavaScript 简体版

原文原文鏈接

普通的插槽裏面的數據是在父組件裏定義的，而做用域插槽裏的數據是在子組件定義的。javascript

有時候做用域插槽頗有用，好比使用Element-ui表格自定義模板時就用到了做用域插槽，Element-ui定義了每一個單元格數據的顯示格式，咱們能夠經過做用域插槽自定義數據的顯示格式，對於二次開發來講具備很強的擴展性。html

做用域插槽使用<template>來定義模板，能夠帶兩個參數，分別是:vue

slot-scope ;模板裏的變量，舊版使用scope屬性java

slot ;該做用域插槽的name,指定多個做用域插槽時用到，默認爲default，即默認插槽node

例如:npm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
          <Child>
            <template slot="header" slot-scope="props">                 <!--定義了名爲header的做用域插槽的模板-->
              <h1>{{props.info.name}}-{{props.info.age}}</h1>
            </template>
            <template slot-scope="show">                                <!--定義了默認做用域插槽的模板-->
              <p>{{show.today}}</p>
            </template>
          </Child>
      </div>
      <script> Vue.config.productionTip=false; Vue.config.devtools=false; Vue.component('Child',{ template:`<div class="container">
                        <header><slot name="header" :info="info"></slot></header>     //header插槽
                        <main><slot today="禮拜一">默認內容</slot></main>               //默認插槽
                    </div>`,
 data(){ return { info:{name:'ge',age:25} } } }) debugger
        new Vue({ el: '#app', data:{ title:'我是標題', msg:'我是內容' } }) </script>
</body>
</html>

咱們在子組件定義了兩個插槽，以下:數組

header插槽內經過v-bind綁定了一個名爲info的特性，值爲一個對象，包含一個name和age屬性app

另外一個是普通插槽，傳遞了一個today特性，值爲禮拜一函數

父組件引用子組件時定義了模板，渲染後結果以下:源碼分析

對應的html代碼以下:

其實Vue內部把父組件template下的子節點編譯成了一個函數，在子組件實例化時調用的，因此做用域纔是子組件的做用域

源碼分析

父組件解析模板將模板轉換成AST對象時會執行processSlot()函數，以下:

function processSlot (el) {       //第9767行 解析slot插槽
  if (el.tag === 'slot') {          //若是是slot
    /*普通插槽的邏輯*/ } else { var slotScope; if (el.tag === 'template') {                //若是標籤名爲template(做用域插槽的邏輯)
      slotScope = getAndRemoveAttr(el, 'scope');          //嘗試獲取scope
      /* istanbul ignore if */  
      if ("development" !== 'production' && slotScope) {  //在開發環境下報一些信息，由於scope屬性已淘汰，新版本開始用slot-scope屬性了
        warn$2( "the \"scope\" attribute for scoped slots have been deprecated and " +
          "replaced by \"slot-scope\" since 2.5. The new \"slot-scope\" attribute " +
          "can also be used on plain elements in addition to <template> to " +
          "denote scoped slots.", true ); } el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope'); //獲取slot-scope特性，值保存到AST對象的slotScope屬性裏
    } else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) { /*其它分支*/ } var slotTarget = getBindingAttr(el, 'slot');          //嘗試獲取slot特性
    if (slotTarget) {                                     //若是獲取到了
      el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget;   //則保存到el.slotTarget裏面
      // preserve slot as an attribute for native shadow DOM compat
      // only for non-scoped slots.
      if (el.tag !== 'template' && !el.slotScope) { addAttr(el, 'slot', slotTarget); } } } }

執行到這裏，對於<template slot="header" slot-scope="props"> 節點來講，添加了一個slotScope和slotTarget屬性，以下:

對於<template slot-scope="show">節點來講，因爲沒有定義slot屬性，它的AST對象以下:

做用域插槽和普通節點最大的不一樣點是它不會將當前結點掛在AST對象樹上，而是掛在了父節點的scopedSlots屬性上。

在解析完節點屬性後會執行start()函數內的末尾會判斷若是發現AST對象.slotScope存在，則會在currentParent對象(也就是父AST對象)的scopedSlots上新增一個el.slotTarget屬性，值爲當前template對應的AST對象。

if (currentParent && !element.forbidden) {    //第9223行 解析模板時的邏輯 若是當前對象不是根對象， 且不是style和text/javascript類型script標籤
  if (element.elseif || element.else) {           //若是有elseif或else指令存在(設置了v-else或v-elseif指令)
 processIfConditions(element, currentParent); } else if (element.slotScope) { // scoped slot //若是存在slotScope屬性,便是做用域插槽
    currentParent.plain = false; var name = element.slotTarget || '"default"';(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;   //給父元素增長一個scopedSlots屬性，值爲數組，每一個鍵名爲對應的目標名稱，值爲對應的做用域插槽AST對象
  } else { currentParent.children.push(element); element.parent = currentParent; } }

這樣父節點就存在一個slotTarget屬性了，值爲對應的做用域插槽AST對象，例子裏執行到這一步對應slotTarget以下:

default和header分別對應父組件裏的兩個template節點

父組件執行generate的時候,若是AST對象的scopedSlots屬性存在，則執行genScopedSlots()函數拼湊data:

if (el.scopedSlots) {     //若是el.scopedSlots存在，即子節點存在做用域插槽 
    data += (genScopedSlots(el.scopedSlots, state)) + ",";    //調用genScopedSlots()函數，並拼接到data裏面
  }

genScopedSlots函數會返回scopedSlots:_u([])函數字符串,_u就是全局的resolveScopedSlots函數，genScopedSlots以下:

function genScopedSlots (     //第10390行 
 slots, state ) { return ("scopedSlots:_u([" + (Object.keys(slots).map(function (key) {     //拼湊一個_u字符串
      return genScopedSlot(key, slots[key], state)                            //遍歷slots，執行genScopedSlot，將返回值保存爲一個數組，做爲_u的參數
    }).join(',')) + "])") }

genScopedSlot會拼湊每一個slots，以下:

function genScopedSlot ( //第10399行 
 key, el, state ) { if (el.for && !el.forProcessed) { return genForScopedSlot(key, el, state) } var fn = "function(" + (String(el.slotScope)) + "){" +      //拼湊一個函數,el.slotScope就是模板裏設置的slot-scope屬性
    "return " + (el.tag === 'template'
      ? el.if
        ? ((el.if) + "?" + (genChildren(el, state) || 'undefined') + ":undefined") : genChildren(el, state) || 'undefined' : genElement(el, state)) + "}"; return ("{key:" + key + ",fn:" + fn + "}") }

解析後生成的render函數以下:

with(this){return _c('div',{attrs:{"id":"app"}},[_c('child',{scopedSlots:_u([{key:"header",fn:function(props){return [_c('h1',[_v(_s(props.info.name)+"-"+_s(props.info.age))])]}},{key:"default",fn:function(show){return [_c('p',[_v(_s(show.today))])]}}])})],1)}

這樣看着不清楚，咱們整理一下，以下:

with(this) { return _c( 'div', {attrs: {"id": "app"}}, [_c('child', { scopedSlots: _u([ {key: "header",fn: function(props) {return [_c('h1', [_v(_s(props.info.name) + "-" + _s(props.info.age))])]}}, {key: "default",fn: function(show) {return [_c('p', [_v(_s(show.today))])]}} ]) } )], 1) }

能夠看到_u的參數是一個對象，鍵名爲插槽名，值是一個函數，最後子組件會執行這個函數的,建立子組件的實例時，會將scopedSlots屬性保存到data.scopedSlots上

對於子組件的編譯過程和普通插槽沒有什麼區別，惟一不一樣的是會有attr屬性，例子裏的組件編譯後生成的render函數以下:

with(this){return _c('div',{staticClass:"container"},[_c('header',[_t("header",null,{info:info})],2),_v(" "),_c('main',[_t("default",[_v("默認內容")],{today:"禮拜一"})],2)])}

這樣看着也不清楚，咱們整理一下，以下:

with(this) { return _c('div', {staticClass: "container"}, [ _c('header', [_t("header", null, {info: info})], 2), _v(" "), _c('main', [_t("default", [_v("默認內容")], {today: "禮拜一"})], 2) ] ) }

能夠看到最後和普通插槽同樣也是執行_t函數的，不過在_t函數內會優先從scopedSlots中獲取模板，以下:

function renderSlot (       //渲染插槽
 name, fallback, props, bindObject ) { var scopedSlotFn = this.$scopedSlots[name];           //嘗試從 this.$scopedSlots中獲取名爲name的函數，也就是咱們在上面父組件渲染生成的render函數裏的做用域插槽相關函數
  var nodes; if (scopedSlotFn) { // scoped slot //若是scopedSlotFn存在
    props = props || {}; if (bindObject) { if ("development" !== 'production' && !isObject(bindObject)) { warn( 'slot v-bind without argument expects an Object', this ); } props = extend(extend({}, bindObject), props); } nodes = scopedSlotFn(props) || fallback;          //最後執行scopedSlotFn這個函數，參數爲props，也就是特性數組
  } else { /*普通插槽的分支*/ } var target = props && props.slot; if (target) { return this.$createElement('template', { slot: target }, nodes) } else { return nodes } }