Vue源码解析-了解vue插槽slot篇

1.从简单的匿名插槽开始

Vue.component('button-counter', {
  template: '<div> <slot>我是默认内容</slot></div>'
})
复制代码

new Vue({
	el: '#app',
	template: '<button-counter><span>我是slot传入内容</span></button-counter>'
})
复制代码

这里先注册一个button-counter组件，而后使用它，上面渲染出来的结果是 我是slot内容

原理解析：

1.这里直接看到组件button-counter编译后的render函数，就不详细从template模板编译提及，直接看最后的render函数：

(function anonymous(
) {
with(this){return _c('div',[_t("default",[_v("我是默认内容")])],2)}
})
复制代码

这里_v就是建立普通文本节点，主要看_t函数，这里_t也就是renderSlot函数的简写

function installRenderHelpers (target) {
  ...
  target._t = renderSlot;
  ...
}
复制代码

function renderSlot (
  name,
  fallback,
  props,
  bindObject
) {
  var scopedSlotFn = this.$scopedSlots[name];
  var nodes;
  nodes = scopedSlotFn(props) || fallback;
  return nodes;
}
复制代码

这里把函数renderSlot函数简化下，其它状况先不看，这里会把name和fallback传进来， 这里先说一下name属性，咱们上面定义是

Vue.component('button-counter', {
  template: '<div><slot>我是默认内容</slot></div>'
})
复制代码

这里slot没有给props为name的值，因此默认是default，咱们能够给它一个name值，例如

Vue.component('button-counter', {
  template: '<div><slot name="header">我是默认内容</slot></div>'
})
复制代码

那么使用时

new Vue({
  el: '#app',
  template: '<button-counter><span slot="header">我是slot传入内容</span></button-counter>'
})
复制代码

可是上面的用法slot在2.6.0版本已经废弃，提供了新的v-slot代替，可是你仍然能够这么写，源码中依然保存对slot的兼容处理，咱们看下用v-slot的写法以及须要注意的地方

new Vue({
  el: '#app',
  template: '<button-counter><template v-slot:header><span>我是slot传入内容</span></template></button-counter>'
})
复制代码

注意这里v-slot须要使用在template，不可再跟上面同样直接做用于span标签上面

回到上面说的renderSlot函数，name这里是默认值default，第二个参数fallback就是咱们在组件中的slot节点的默认值

var scopedSlotFn = this.$scopedSlots[name];
var nodes;
nodes = scopedSlotFn(props) || fallback;
return nodes;
复制代码

若是this.$scopredSlots存在该name的值，则调用该返回函数生成一个nodes节点返回，不然返回fallback(即默认值)，因此到这里咱们知道为何在自定义组件中有传入子元素就渲染子元素，没有就使用默认插槽里面的值了，这里涉及到this.$scopredSlots这个变量，咱们接下来看下这个值，咱们首先看下vm.$slots 当组件在执行initRender函数时

function initRender (vm) {
  ...
  vm.$slots = resolveSlots(options._renderChildren, renderContext);
  ...
}
复制代码

resolveSlots函数会对children节点作归类和过滤处理，返回slots

function resolveSlots (
    children,
    context
  ) {
    if (!children || !children.length) {
      return {}
    }
    var slots = {};
    for (var i = 0, l = children.length; i < l; i++) {
      var child = children[i];
      var data = child.data;
      // remove slot attribute if the node is resolved as a Vue slot node
      if (data && data.attrs && data.attrs.slot) {
        delete data.attrs.slot;
      }
      // named slots should only be respected if the vnode was rendered in the
      // same context.
      if ((child.context === context || child.fnContext === context) &&
        data && data.slot != null
      ) {
        // 若是slot存在(slot="header") 则拿对应的值做为key
        var name = data.slot;
        var slot = (slots[name] || (slots[name] = []));
        // 若是是tempalte元素 则把template的children添加进数组中，这也就是为何你写的template标签并不会渲染成另外一个标签到页面
        if (child.tag === 'template') {
          slot.push.apply(slot, child.children || []);
        } else {
          slot.push(child);
        }
      } else {
        // 若是没有就默认是default
        (slots.default || (slots.default = [])).push(child);
      }
    }
    // ignore slots that contains only whitespace
    for (var name$1 in slots) {
      if (slots[name$1].every(isWhitespace)) {
        delete slots[name$1];
      }
    }
    return slots
  }
复制代码

这里的_renderChildren就是把children的name相同的VNodes节点归类放到一个数组中，最终返回了一个对象，key为对应的name，值是包含该name对应的节点数组

接下来的_render函数的时候，经过normalizeScopedSlots获得vm.$scopedSlots

vm.$scopedSlots = normalizeScopedSlots(
  _parentVnode.data.scopedSlots,
  vm.$slots,
  vm.$scopedSlots
);
复制代码

做用域插槽

有时咱们须要获取子组件的一些内部数据，好比获取下面msg的值，可是当前执行的做用域是在父组件的实例上，经过this.msg是获取不到子组件里面的值，咱们须要在<slot>元素上动态绑定一个msg对象属性，而后在父组件能够经过下面方式来获取

Vue.component('button-counter', {
  data () {
    return {
        msg: 'hi'
    }
 },
  template: '<div><slot :msg="msg">我是默认内容</slot></div>'
})
复制代码

new Vue({
  el: '#app',
  template: '<button-counter><template scope="msg"><span>{{props.msg}}</span></template></button-counter>'
})
复制代码

这是2.5之前的写法，2.5之后采用slot-scope

new Vue({
  el: '#app',
  template: '<button-counter><template slot-scope="msg"><span>{{props.msg}}</span></template></button-counter>'
})
复制代码

2.6之后废弃上面两种写法，采用v-slot

new Vue({
  el: '#app',
  template: '<button-counter><template v-slot="msg"><span>{{props.msg}}</span></template></button-counter>'
})
复制代码

这里可以拿到msg是由于在renderSlot的时候 执行会传入props，能够看到编译后的render函数_t的第三个参数就是props

(function anonymous(
) {
with(this){return _c('div',[_t("default",[_v("我是默认的")],{"msg":msg})],2)}
})
复制代码

var scopedSlotFn = this.$scopedSlots[name];
var nodes;
nodes = scopedSlotFn(props) || fallback;
return nodes;
复制代码

由render函数能够看到传进去的props后就可以拿到msg的值了

(function anonymous(
) {
with(this){return _c('button-counter',{scopedSlots:_u([{key:"default",fn:function(props){return [_c('span',[_v(_s(props.msg))])]}}])})}
})
复制代码

最后

这里只是简单描述了几个关键点，插槽做用域还有支持解构赋值，支持动态插槽名称等写法，还有不少的细节处理须要更加深刻去了解源码。

若是以为对你有帮忙，麻烦点个star哈 github地址