插槽（slot）是vue提出來的乙個概念，正如名字一樣，插槽用於決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模組化的特質和更大的重用性。插槽的原理和angular中的ng-transclude十分類似，本篇也是對所學內容做乙個梳理。
形式上看，slot的設計對應了angular中的ng-tranclude屬性，即用該方法來確定在何處放置嵌入部分。
1.ng-transclude使用
html內容
}my-msg>
here comes the message.p>
ng-transclude>
div>
div>
here comes the message.p>
}div>
匿名slot
舉個栗子，在vue中，我們會這麼寫帶slot的元件：
子元件模板
我是子元件的標題h2>
slot> /*這裡插入父元件在引用子元件內部的內容*/
div>
我是父元件的標題h1>
這是一些初始內容p>
這是更多的初始內容p>
my-component>
div>
我是父元件的標題h1>
我是子元件的標題h2>
這是一些初始內容p>
這是更多的初始內容p>
div>
div>
對比一下，是不是和ng-transclude十分類似？slot所做的工作，也是把父元件中的「內容」被放入了slot，並將組合後的元件模版返回到父元件。這裡slot標籤裡的內容實際並沒有顯示，被當作了備用內容（只有在宿主元素為空，沒有要插入的內容時才顯示）。
更進一步地，vue給出了具名slot也作用域插槽這兩個比較獨特的設計。
上面栗子中使用的是匿名slot，即該節點不攜帶任何其也特徵資訊。對應的，vue也提供了具名slot。簡單來講，具名slot就是會為模板中不同部分指定相應的插入位置。但是當部分內容沒有找到對應的插入位置，就會依次插入匿名的slot中，當沒有找到匿名slot時，這段內容就會被拋棄掉。
name="header">
slot>
name="footer">
slot>
slot>
div>
lack of anonymous slot, this paragraph will not shown.p>
slot="footer">here comes the footer contentp>
slot="header">here comes the header contentp>
my-component>
here comes the header contentp>
here comes the footer contentp>
lack of anonymous slot, this paragraph will not shown.p>
div>
Vue 插槽（slot）的理解
父元件向子元件傳值我們會一般用到props，那傳遞乙個dom節點呢？使用插槽slot，能高效地解決父元件向子元件插入dom節點問題。插槽 在vue中，可以在元件內部定義乙個或多個插槽，子元件決定插槽的位置，也可以設定預設的資訊，父元件在插槽裡插入資訊，有預設資訊時，父元件不插入資訊，則顯示子元件的預...
vue中的插槽slot理解
本篇文章參考賽冷思的個人部落格 1.函式預設傳參 在我們寫js函式我們的可能會給他們乙個預設的引數，寫法是 function show age,name show 20,張三 show 18,命名 18,明明 如果使用者不傳入引數，那麼會輸出預設值，如果使用者傳入，會輸出傳入的值，這種寫法很靈活 v...
Vue中slot初理解
初步理解 hello world 在元件標籤child中的span標籤會被元件模板template內容替換掉，當想讓元件標籤child中內容傳遞給元件時需要使用slot插槽 就是在元件裡 佔坑 在元件模板中佔好了位置，當使用該元件標籤時候，元件標籤裡面的內容就會自動填坑 替換元件模板中位置 當插槽也...