vue中關於插槽的文件說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項在使用頻率、使用先後上的差別，這就有可能造成初次接觸插槽的開發者容易產生「算了吧，回頭再學，反正已經可以寫基礎元件了」的想法，於是就關閉了vue的說明文件。
實際上，插槽的概念很簡單，下面通過分三部分來講。這三部分也是按照vue說明文件的順序來寫的。
進入這三部分之前，先讓還沒接觸過插槽的同學對什麼是插槽有乙個簡單的概念：插槽，也就是slot，是元件的一塊html模板，這塊模板顯示不顯示、以及怎樣顯示由父元件來決定。實際上，乙個slot最核心的兩個問題在這裡就點出來了，是顯示不顯示和怎樣顯示。
由於插槽是一塊模板，所以，對於任何乙個元件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。 非插槽模板指的是html模板，比如『div、span、ul、table』這些，非插槽模板的顯示與隱藏以及怎樣顯示由元件自身控制；插槽模板是slot，它是乙個空殼子，因為它的顯示與隱藏以及最後用什麼樣的html模板顯示由父元件控制。但是插槽顯示的位置卻由子元件自身決定，slot寫在元件template的什麼位置，父元件傳過來的模板將來就顯示在什麼位置。
首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它預設插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設定name屬性。
單個插槽可以放置在元件的任意位置，但是就像它的名字一樣，乙個元件中只能有乙個該類插槽。相對應的，具名插槽就可以有很多個，只要名字（name屬性）不同就可以了。
下面通過乙個例子來展示。
父元件：
選單1
選單2選單3
選單4選單5
選單6
複製**
複製**
選單1
選單2選單3
選單4選單5
選單6複製**
注：所有demo都加了樣式，以方便觀察。其中，父元件以灰色背景填充，子元件都以淺藍色填充。
複製**
父元件：
選單1
選單2選單3
選單4選單5
選單6 選單-1
選單-2
選單-3
選單-4
選單-5
選單-6
選單->1
選單->2
選單->3
選單->4
選單->5
選單->6
複製**
// 具名插槽
// 具名插槽
// 匿名插槽
複製**
可以看到，父元件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板預設關聯匿名插槽。
最後，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶資料的插槽。什麼意思呢，就是前面兩種，都是在元件的template裡面寫
匿名插槽
具名插槽
複製**
export default
},}複製**
html模板
複製**
正因為作用域插槽繫結了一套資料，父元件可以拿來用。於是，情況就變成了這樣：樣式父元件說了算，但內容可以顯示子元件插槽繫結的。
我們再來對比，作用域插槽跟單個插槽和具名插槽的區別，因為單個插槽和具名插槽不繫結資料，所以父元件提供的模板一般要既包括樣式又包括內容，上面的例子中，你看到的文字，「選單1」，「選單2」都是父元件自己提供的內容；而作用域插槽，父元件只需要提供一套樣式（在確實用作用域插槽繫結的資料的前提下）。
下面的例子，你就能看到，父元件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供資料，資料使用的都是子元件插槽自己繫結的那個陣列（一堆人名的那個陣列）。
父元件：
}
}我就是模板
複製**
// 作用域插槽
export default
}}複製**
以上三個demo就放在github了，有需要的可以去取。使用非常方便，是基於vue-cli搭建的工程。
位址點這裡
深入理解vue中的slot與slot scope
class father 這裡是父元件h3 class tmpl 選單1span 選單2span 選單3span 選單4span 選單5span 選單6span div child div template class child 這裡是子元件h3 slot div template class t...
深入理解vue中的slot與slot scope
vue中關於插槽的文件說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率 使用先後上的差別，這就有可能造成初次接觸插槽的開發者容易產生 算了吧，回頭再學，反正已經可以寫基礎元件了 於是就關閉了vue說明文件。實際上，插槽的概念很簡單，下面通過分三部分來...
vue的深入理解
1.vue的初步認識 var data var vm new vue document.write vm.data data true document.write true document.write vm.el document.getelementbyid vue det true new ...