Vue.js 源码分析(二十六) 高级应用作用域插槽详解

程序员文章站 2022-04-09 15:57:03

普通的插槽里面的数据是在父组件里定义的，而作用域插槽里的数据是在子组件定义的。有时候作用域插槽很有用，比如使用Element-ui表格自定义模板时就用到了作用域插槽，Element-ui定义了每个单元格数据的显示格式，我们可以通过作用域插槽自定义数据的显示格式，对于二次开发来说具有很强的扩展性。 ......

普通的插槽里面的数据是在父组件里定义的，而作用域插槽里的数据是在子组件定义的。

有时候作用域插槽很有用，比如使用element-ui表格自定义模板时就用到了作用域插槽，element-ui定义了每个单元格数据的显示格式，我们可以通过作用域插槽自定义数据的显示格式，对于二次开发来说具有很强的扩展性。

作用域插槽使用<template>来定义模板，可以带两个参数，分别是:

slot-scope ;模板里的变量，旧版使用scope属性

slot ;该作用域插槽的name,指定多个作用域插槽时用到，默认为default，即默认插槽

例如:

<!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属性

另一个是普通插槽，传递了一个today特性，值为礼拜一

父组件引用子组件时定义了模板，渲染后结果如下:

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

对应的html代码如下:

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

其实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属性，如下:

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

对于<template slot-scope="show">节点来说，由于没有定义slot属性，它的ast对象如下:

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

作用域插槽和普通节点最大的不同点是它不会将当前结点挂在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如下:

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

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

最后将nodes返回，也就是在父节点的template内定义的子节点返回，作为最后渲染的节点集合。

上一篇： ECMAScript5面向对象技术(2)--函数

下一篇： iOS常用算法之两个有序数组合并, 要求时间复杂度为0(n)

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

Vue.js 源码分析(二十五) 高级应用插槽详解

Vue.js 源码分析(二十四) 高级应用自定义指令详解

Vue.js 源码分析(三十一) 高级应用 keep-alive 组件详解