demo請參考 這篇文章
本文是參考一些文章之后的整理。

插槽是一種模板，從模板角度來講，模板可以分為插槽和非插槽

非插槽

• html 模板，eg:div,span, ul , table
• 顯示，隱藏，如何顯示均由組件自身控制。

插槽

• 顯示，有隱藏，以及用什么樣的html顯示由父組件控制
• 但是，插槽顯示的位置，卻由子組件自身決定。
  • Slot寫在什么位置，那么父組件傳過來的html就顯示在什么位置。

插槽的分類

單個插槽 | 默認插槽 | 匿名插槽

• 一個組件只能有一個匿名插槽
• 顧名思義，該插槽沒有提供插槽的name屬性。這是和具名插槽最大的區(qū)別

具名插槽

• 一個組件可以有多個具名插槽

作用域插槽 | 帶數(shù)據(jù)插槽

• 這種插槽和前面兩種的區(qū)別：數(shù)據(jù)由誰提供。
  • 默認插槽和具名插槽的數(shù)據(jù)都是由父組件提供的
  • 作用域插槽的數(shù)據(jù)是其本身提供的。
• 舉個例子
  • 我們在使用table的時候， el-table-column就相當于子組件，我們在column中定義 slot-scope = "{row}”，該row是個形參。在html中使用該row時，
    實際上是獲取了該行所有的屬性值，我們可以直接獲取row中的屬性進行操作。