什么是作用域插槽？插槽与作用域插槽的区别

一、概念

1.  
   // 有name的属于具名插槽，没有name属于匿名插槽
2.  
   <app>
3.  
   <div slot="a">xxxx</div>
4.  
   <div slot="b">xxxx</div>
5.  
   </app>
6.  
   <slot name="a"></slot>
7.  
   <slot name="b"></slot>
8.  
    
9.  
   普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面
10.  
    作用域插槽渲染是在子组件里面

1.插槽slot

在渲染父组件的时候，会将插槽中的先渲染。

创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿 子进行分类 {a:[vnode],b[vnode]}

渲染组件时会拿对应的slot属性的节点进行替换操作。（插槽的作用域为父组件，插槽中HTML模板显示不显示、以及怎样显示由父组件来决定）

有name的父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。

2.作用域插槽slot-scope

作用域插槽在解析的时候，不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。

或者可以说成作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件。（插槽的作用域为子组件）

1.  
   子组件：
2.  
   <slot :nickName="'wthreesix'"></slot>
3.  
    
4.  
   父组件：
5.  
   <slot-child>
6.  
   <template slot-scope="scope">
7.  
   <div>{{scope.nickName}}</div>
8.  
   </template>
9.  
   </slot-child>

二、源码图

三、插槽渲染分析

1.插槽

1.  
   // 父组件：
2.  
   const VueTemplateCompiler = require('vue-template-compiler');
3.  
   let ele = VueTemplateCompiler.compile(`
4.  
   <my-component>
5.  
   <div slot="header">node</div>
6.  
   <div>react</div>
7.  
   <div slot="footer">vue</div>
8.  
   </my-component>
9.  
   `)
10.  
     
11.  
    将上面组件编译后：
12.  
    /**
13.  
    with(this) {
14.  
    return _c('my-component', // _c 创建虚拟dom
15.  
    [ // 组件中包含子节点
16.  
    _c('div', // 第一个是一个插槽，插槽叫header
17.  
    {
18.  
    attrs: {
19.  
    "slot": "header"
20.  
    },
21.  
    slot: "header"
22.  
    },
23.  
    [_v("node")] // 将里面内容存起来了（_v是createTextVNode创建文本节点）
24.  
    ),
25.  
    _v(" "),
26.  
    _c('div',[_v("react")]),
27.  
    _v(" "),
28.  
    _c('div', {
29.  
    attrs: {
30.  
    "slot": "footer"
31.  
    },
32.  
    slot: "footer"
33.  
    }, [_v("vue")])
34.  
    ]
35.  
    )
36.  
    }
37.  
    */
38.  
    在调render方法的时候已经将组件全部渲染好了
39.  
     
40.  
    // 子组件
41.  
    let ele = VueTemplateCompiler.compile(`
42.  
    <div>
43.  
    <slot name="header"></slot>
44.  
    <slot name="footer"></slot>
45.  
    <slot></slot>
46.  
    </div>
47.  
    `);
48.  
    /**
49.  
    with(this) {
50.  
    // 渲染的时候会找header对应的是谁
51.  
    return _c('div', [
52.  
    _t("header"), _v(" "),
53.  
    _t("footer"), _v(" "),
54.  
    _t("default")], 2)
55.  
    }
56.  
    当找到就会换过来，如下：
57.  
    return _c('div', [_v("node"), _v(" "), _v("vue"), _v(" "),
58.  
    _t("default")], 2)
59.  
    }
60.  
    }
61.  
    **/
62.  
    // _t是renderSlot
63.  
     
64.  
    插槽就是一个替换的过程，将父组件渲染好的结果直接替换到自己的上面，创建的过程相当于在父组件渲染的

2.作用域插槽

1.  
   父组件：
2.  
   let ele = VueTemplateCompiler.compile(`
3.  
   <app>
4.  
   <div slot-scope="msg" slot="footer">{{msg.a}}</div>
5.  
   </app>
6.  
   `);
7.  
   /**
8.  
   with(this) {
9.  
   // 编译出的不是一个child，而是一个属性scopedSlots
10.  
    return _c('app', {
11.  
    scopedSlots: _u([{
12.  
    key: "footer",
13.  
    fn: function (msg) { 将子节点变成一个函数，这个函数不调用就不会去渲染这个子节点
14.  
    return _c('div', {}, [_v(_s(msg.a))])
15.  
    }
16.  
    }])
17.  
    })
18.  
    }
19.  
    }
20.  
    在初始化的时候并不会渲染子节点
21.  
    */
22.  
     
23.  
    子组件：
24.  
    const VueTemplateCompiler = require('vue-template-compiler');
25.  
    VueTemplateCompiler.compile(`
26.  
    // 当我们在写slot去执行的时候进行渲染
27.  
    <div>
28.  
    <slot name="footer" a="1" b="2"></slot>
29.  
    </div>
30.  
    `);
31.  
    /**
32.  
    with(this) {
33.  
    // 去找footer，找见会调用上面的那个函数，并且将属性传入到这个函数里面，这时候才会把这节点进行渲染，完成之后替换调
34.  
    return _c('div', [_t("footer", null, {
35.  
    "a": "1",
36.  
    "b": "2"
37.  
    })], 2)
38.  
    }
39.  
    **/
40.  
     
41.  
    // 作用域插槽的内容会被渲染成一个函数
42.  
    // 作用域插槽渲染是在当前组件的内部，不是在父组件中

四、源码

1.initRender（初始化render，构建vm.$slots）

1.  
   export function initRender (vm: Component) {
2.  
   vm.$slots = resolveSlots(options._renderChildren, renderContext)
3.  
   vm.$scopedSlots = emptyObject
4.  
   }

2.resolveSlots（映射slot名字和对应的vnode）

1.  
   export function resolveSlots (
2.  
   children: ?Array<VNode>,
3.  
   context: ?Component
4.  
   ): { [key: string]: Array<VNode> } {
5.  
   if (!children || !children.length) {
6.  
   return {}
7.  
   }
8.  
   const slots = {}
9.  
   for (let i = 0, l = children.length; i < l; i++) {
10.  
    const child = children[i]
11.  
    const data = child.data
12.  
    // remove slot attribute if the node is resolved as a Vue slot node
13.  
    if (data && data.attrs && data.attrs.slot) {
14.  
    delete data.attrs.slot
15.  
    }
16.  
    // named slots should only be respected if the vnode was rendered in the
17.  
    // same context.
18.  
    if ((child.context === context || child.fnContext === context) &&
19.  
    data && data.slot != null
20.  
    ) {
21.  
    const name = data.slot
22.  
    const slot = (slots[name] || (slots[name] = []))
23.  
    if (child.tag === 'template') {
24.  
    slot.push.apply(slot, child.children || [])
25.  
    } else {
26.  
    slot.push(child)
27.  
    }
28.  
    } else {
29.  
    (slots.default || (slots.default = [])).push(child)
30.  
    }
31.  
    }
32.  
    // ignore slots that contains only whitespace
33.  
    for (const name in slots) {
34.  
    if (slots[name].every(isWhitespace)) {
35.  
    delete slots[name]
36.  
    }
37.  
    }
38.  
    return slots
39.  
    }

3.normalizeScopedSlots（core/vdom/helpers/normalize-scoped-slot.js）

1.  
   export function normalizeScopedSlots (
2.  
   slots: { [key: string]: Function } | void,
3.  
   normalSlots: { [key: string]: Array<VNode> },
4.  
   prevSlots?: { [key: string]: Function } | void
5.  
   ): any {
6.  
   let res
7.  
   const hasNormalSlots = Object.keys(normalSlots).length > 0
8.  
   const isStable = slots ? !!slots.$stable : !hasNormalSlots
9.  
   const key = slots && slots.$key
10.  
    if (!slots) {
11.  
    res = {}
12.  
    } else if (slots._normalized) {
13.  
    // fast path 1: child component re-render only, parent did not change
14.  
    return slots._normalized
15.  
    } else if (
16.  
    isStable &&
17.  
    prevSlots &&
18.  
    prevSlots !== emptyObject &&
19.  
    key === prevSlots.$key &&
20.  
    !hasNormalSlots &&
21.  
    !prevSlots.$hasNormal
22.  
    ) {
23.  
    // fast path 2: stable scoped slots w/ no normal slots to proxy,
24.  
    // only need to normalize once
25.  
    return prevSlots
26.  
    } else {
27.  
    res = {}
28.  
    for (const key in slots) {
29.  
    if (slots[key] && key[0] !== '$') {
30.  
    res[key] = normalizeScopedSlot(normalSlots, key, slots[key]) // 作用域插槽
31.  
    }
32.  
    }
33.  
    }
34.  
    // expose normal slots on scopedSlots
35.  
    for (const key in normalSlots) {
36.  
    if (!(key in res)) {
37.  
    res[key] = proxyNormalSlot(normalSlots, key) // 普通插槽
38.  
    }
39.  
    }
40.  
    // avoriaz seems to mock a non-extensible $scopedSlots object
41.  
    // and when that is passed down this would cause an error
42.  
    if (slots && Object.isExtensible(slots)) {
43.  
    (slots: any)._normalized = res
44.  
    }
45.  
    def(res, '$stable', isStable)
46.  
    def(res, '$key', key)
47.  
    def(res, '$hasNormal', hasNormalSlots)
48.  
    return res
49.  
    }

4.proxyNormalSlot（将slot代理到scopeSlots上）

1.  
   function proxyNormalSlot(slots, key) {
2.  
   return () => slots[key]
3.  
   }

5.normalizeScopedSlot（将scopeSlots对应属性和方法挂载到scopeSlots）

1.  
   function normalizeScopedSlot(normalSlots, key, fn) {
2.  
   const normalized = function () {
3.  
   let res = arguments.length ? fn.apply(null, arguments) : fn({})
4.  
   res = res && typeof res === 'object' && !Array.isArray(res)
5.  
   ? [res] // single vnode
6.  
   : normalizeChildren(res)
7.  
   return res && (
8.  
   res.length === 0 ||
9.  
   (res.length === 1 && res[0].isComment) // #9658
10.  
    ) ? undefined
11.  
    : res
12.  
    }
13.  
    // this is a slot using the new v-slot syntax without scope. although it is
14.  
    // compiled as a scoped slot, render fn users would expect it to be present
15.  
    // on this.$slots because the usage is semantically a normal slot.
16.  
    if (fn.proxy) {
17.  
    Object.defineProperty(normalSlots, key, {
18.  
    get: normalized,
19.  
    enumerable: true,
20.  
    configurable: true
21.  
    })
22.  
    }
23.  
    return normalized
24.  
    }

6.最后调用renderSlot用函数的返回值进行渲染。