摘要：具名插槽適用于具有一定結(jié)構(gòu)且有多處不固定內(nèi)容的組件此時在定義組件時其實就是預(yù)留了多個空缺位置且分別命名如果只有一個當(dāng)然也可以采用具名插槽，但肯定不如默認(rèn)插槽，只會徒增配置成本。然后在使用時將內(nèi)容分成多塊分別命名成預(yù)留空缺位置的名字。

本文主要描述不才在學(xué)習(xí)Vue和Bootstrap中遇到的關(guān)于插槽的問題及解決方案

vue官網(wǎng)和很多熱心朋友又很多關(guān)于默認(rèn)插槽，具名插槽，插槽作用域相關(guān)的解釋，我就不重復(fù)搬過來占用篇幅了，這里簡單的談?wù)勎覀€人的淺見。

插槽就是預(yù)留位置
插槽其實就是定義組件時預(yù)留的一些位置，將使用組件時組件內(nèi)額外的一些標(biāo)簽寫入到對應(yīng)的預(yù)留位置就是插槽的作用了。

插槽適用于不固定內(nèi)容的組件
正是因為無法預(yù)見組件內(nèi)部所有可能的標(biāo)簽或內(nèi)容，所以干脆留一個空缺，全權(quán)交給使用者，想填啥就用啥。

具名插槽適用于具有一定結(jié)構(gòu)且有多處不固定內(nèi)容的組件
此時在定義組件時其實就是預(yù)留了多個空缺位置且分別命名（如果只有一個當(dāng)然也可以采用具名插槽，但肯定不如默認(rèn)插槽，只會徒增配置成本）。然后在使用時將內(nèi)容分成多塊分別命名成預(yù)留空缺位置的名字。

為什么要定義組件？
答：定義組件是一種封裝的形式，使用最簡單的標(biāo)簽及屬性配置表達(dá)一大段比較豐富的結(jié)構(gòu)效果及一些數(shù)據(jù)和事件。

  

    

      

        
          Collapsible Group Item #1
        
      
    

    

      

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven"t heard of them accusamus labore sustainable VHS.
      
    
  
  

    

      

        
          Collapsible Group Item #2
        
      
    
    

      

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven"t heard of them accusamus labore sustainable VHS.
      
    
  
  

    

      

        
          Collapsible Group Item #3
        
      
    
    

      

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven"t heard of them accusamus labore sustainable VHS.
      
    
  

該示例代碼比較長

結(jié)構(gòu)是很有規(guī)律的，很容易發(fā)現(xiàn)幾個共同的結(jié)構(gòu)：card, card-header, card-body...

文案是具體的展示信息，也是我們希望組件能夠配置的

    

        Anim pariatur ...
    
    

        Anim pariatur ...
    
    

        Anim pariatur ...
    

header一般文本就夠用了，所以直接配置在標(biāo)簽屬性上

content, 如"Anim pariatur ..."我們預(yù)想其可能是其他的一個或多個組件甚至大段html（會有標(biāo)簽），此時放到屬性內(nèi)就不合適了，配置起來超級麻煩

獲取header簡單。遍歷$children從其attrs對象中可以讀取到，放到data中的一個數(shù)組里，采用v-for指令即可很容易渲染出來

獲取content不容易。$children都是虛擬DOM，反向變成html的API沒找到；再者就算找到了，同header一樣遍歷渲染出來，也只是當(dāng)成字符串渲染出來，加上v-html指令，標(biāo)準(zhǔn)的HTML標(biāo)簽倒是確實渲染出來了，可已定義的組件標(biāo)簽未能正確解析渲染（不知道vue有沒有相應(yīng)的API方法解決）。

插槽剛好可以解決內(nèi)容中的標(biāo)簽解析問題，但它會將所有的內(nèi)容（上例中3個div）都解析到一起無法拆分

具名插槽可以解決內(nèi)容無法拆分的問題。那我們就把內(nèi)容中的每一個都標(biāo)一個name, name取值要滿足內(nèi)容個數(shù)不定的條件，所以最好采用和序號有關(guān)的，剛好可以在v-for指令中匹配到。

問題解決！

Vue.component("widget-collapse", {
    template: `

        

            

                

                    {{item.header}}
                
            

            

                

                    
                
            
        
    
`,
    data() {
        let children = this.$slots, items = [];
        for (let i in children) {
            let node = children[i][0];
            if (node.tag) {
                items[i] = ({
                    header: VTool.attr(node, "header") || ("Item " + items.length),
                })
            }
        }
        return {
            vitems: items
        }
    }
})

    

        Anim pariatur ...
    
    

        Anim pariatur ...
    
    

        Anim pariatur ...
    

使用時每個節(jié)點(diǎn)都寫一個slot太累贅，容易寫錯，刪除某個節(jié)點(diǎn)或調(diào)整節(jié)點(diǎn)順序后更改麻煩，能否程序動態(tài)幫忙添加該slot屬性？
答：未找到對應(yīng)API，但對比默認(rèn)與具名插槽的$slots數(shù)據(jù)對象發(fā)現(xiàn)key分別為default和具名name

Vue.component("widget-collapse", {
    template: `

            

                

                    

                        {{item.header}}
                    
                

                

                    

                        
                    
                
            
        
`,
    data() {
        let children = this.$slots.default, items = [];
        for (let i = 0, len = children.length; i < len; i++) {
            let node = children[i];
            if (node.tag) {
                let id = VTool.random();
                this.$slots[id] = node;
                items.push({
                    id: id,
                    header: VTool.attr(node, "header") || ("Item " + items.length),
                })
            }
        }
        return {
            vitems: items
        }
    }
})

    

        Anim pariatur ...
    
    

        Anim pariatur ...
    
    

        Anim pariatur ...
    

以上設(shè)置基本初始化是沒有任何問題了，但在vue對象更新時會更改$slots對象
（經(jīng)跟蹤代碼查找到updateChildComponent方法內(nèi)在更新下層組件時執(zhí)行了vm.$slots = resolveSlots(renderChildren, parentVnode.context);覆蓋了之前縮處理過的$slots，且會在vm._render方法中重新渲染，且在此之前沒有公布任何事件，那就暴力覆蓋重寫了）

Vue.component("widget-collapse", {
    ...
    created() {
        let _render = this._render;
        this._render = function() {
            let $slots = this.$slots;
            for (let name in $slots) {
                if (name !== "default") {
                    return _render.apply(this, arguments);
                }
            }
            // 此時肯定是重新new的$slots, 重寫對應(yīng)關(guān)系
            let children = this.$slots.default, items = [];
            for (let i = 0, len = children.length; i < len; i++) {
                let node = children[i];
                if (node.tag) {
                    let id = VTool.random();
                    this.$slots[id] = node;
                    items.push({
                        id: id,
                        header: VTool.attr(node, "header") || ("Item " + items.length),
                    })
                }
            }
            this.vitems = items;
            return _render.apply(this, arguments);
        }
    },
    ...
})

本文對于vue插槽的處理辦法略顯暴力，但的確解決了我遇到的問題，各位大拿有更好的經(jīng)驗還請不吝賜教，拜謝！