vue的slot插槽
阿新 • • 發佈：2019-02-01
插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。插槽的原理和Angular中的ng-transclude十分類似，本篇也是對所學內容做一個梳理。
Slot（插槽）分發內容
形式上看，Slot的設計對應了angular中的ng-tranclude屬性，即用該方法來確定在何處放置嵌入部分。
ng-transclude使用
html內容
| 1 | <my-msg>{{msg}}</my-msg> |
模版內容
| 1234 | <div><p>Here comes the message. |
渲染結果
| 1234 | <div><p>Here comes the message.</p>{{msg}}</div> |
可以看出，形式上，Angular是把ng-transclude標籤替換為要使用的模板內容。
Slot的使用
匿名slot
舉個栗子，在Vue中，我們會這麼寫帶slot的元件：
元件模板
| 1234 | <div><h2>我是子元件的標題</h2><slot></slot></div> |
父元件模版
| 1234567 | <div><h1>我是父元件的標題</h1><my-component><p>這是一些初始內容</p><p>這是更多的初始內容</p></my-component></div> |
渲染結果
| 12345678 | <div><h1>我是父元件的標題</h1><div><h2>我是子元件的標題</h2><p>這是一些初始內容</p><p>這是更多的初始內容</p></div> |
對比一下，是不是和ng-transclude十分類似？Slot所做的工作，也是把父元件中的“內容”被放入了slot，並將組合後的元件模版返回到父元件。這裡slot標籤裡的內容實際並沒有顯示，被當作了備用內容（只有在宿主元素為空，沒有要插入的內容時才顯示）。
更進一步地，Vue給出了具名Slot也作用域插槽這兩個比較獨特的設計。
具名slot
上面栗子中使用的是匿名slot，即該節點不攜帶任何其也特徵資訊。對應的，Vue也提供了具名slot。簡單來講，具名Slot就是會為模板中不同部分指定相應的插入位置。但是當部分內容沒有找到對應的插入位置，就會依次插入匿名的slot中，當沒有找到匿名slot時，這段內容就會被拋棄掉。
元件模版
| 12345 | ...<slot name="header"></slot><slot name="footer"></slot><slot></slot>... |
父元件模版
| 12345 | ...<p>Lack of anonymous slot, this paragraph will not shown.</p><p slot="footer">Here comes the footer content</p><p slot="header">Here comes the header content</p>... |
渲染結果
| 123 | <p>Here comes the header content</p><p>Here comes the footer content</p><p>Lack of anonymous slot, this paragraph will not shown.</p> |