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

本文主要描述不才在學習Vue和Bootstrap中遇到的關于插槽的問題及解決方案

vue官網和很多熱心朋友又很多關于默認插槽，具名插槽，插槽作用域相關的解釋，我就不重復搬過來占用篇幅了，這里簡單的談談我個人的淺見。

插槽就是預留位置
插槽其實就是定義組件時預留的一些位置，將使用組件時組件內額外的一些標簽寫入到對應的預留位置就是插槽的作用了。

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

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

為什么要定義組件？
答：定義組件是一種封裝的形式，使用最簡單的標簽及屬性配置表達一大段比較豐富的結構效果及一些數據和事件。

  

    

      

        
          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.
      
    
  

該示例代碼比較長

結構是很有規律的，很容易發現幾個共同的結構：card, card-header, card-body...

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

    

        Anim pariatur ...
    
    

        Anim pariatur ...
    
    

        Anim pariatur ...
    

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

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

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

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

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

具名插槽可以解決內容無法拆分的問題。那我們就把內容中的每一個都標一個name, name取值要滿足內容個數不定的條件，所以最好采用和序號有關的，剛好可以在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 ...
    

使用時每個節點都寫一個slot太累贅，容易寫錯，刪除某個節點或調整節點順序后更改麻煩，能否程序動態幫忙添加該slot屬性？
答：未找到對應API，但對比默認與具名插槽的$slots數據對象發現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 ...
    

以上設置基本初始化是沒有任何問題了，但在vue對象更新時會更改$slots對象
（經跟蹤代碼查找到updateChildComponent方法內在更新下層組件時執行了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, 重寫對應關系
            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插槽的處理辦法略顯暴力，但的確解決了我遇到的問題，各位大拿有更好的經驗還請不吝賜教，拜謝！