什么是作用域插槽？插槽與作用域插槽的區別

一、概念

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用函數的返回值進行渲染。