插槽就是子元件中的提供給父元件使用的乙個佔位符，用 表示，父元件可以在這個佔位符中填充任何模板**，如 html、元件等，填充的內容會替換子元件的標籤。
如下**：
1. 在子元件中放乙個佔位符
2. 在父元件中給這個佔位符填充內容：
3. 展示的效果
現在來看看，如果子元件中沒有放插槽，同樣的父元件中在子元件中填充內容，會是啥樣的：
1. 子元件**無插槽：
2. 父元件照常填充內容：
3. 展示的效果：
總結：如果子元件沒有使用插槽，父元件如果需要往子元件中填充模板或者html, 是沒法做到的
插槽的最最簡單使用，上面已有例子，這裡就不寫了，接下來看看，插槽其他使用場景
描述：具名插槽其實就是給插槽娶個名字。乙個子元件可以放多個插槽，而且可以放在不同的地方，而父元件填充內容時，可以根據這個名字把內容填充到對應插槽中。
如下**：
1. 子元件的**，設定了兩個插槽(header和footer)：
2. 父元件填充內容, 父元件通過 v-slot:[name] 的方式指定到對應的插槽中
3.展示的效果：
接下來再來看看，父元件中填充內容的時候，順序調換下，看下能不能內容能不能對應上：
1. 子元件**不變，父元件**中填充順序調換下(如圖，在父元件中，footer 和 header 的填充位置對換)：
2. 展示的效果：
由此看出，即使父元件對插槽的填充的順序打亂，只要名字對應上了，就可以正確渲染到對應的插槽中。即： 父元件填充內容時，是可以根據這個名字把內容填充到對應插槽中的
描述： 預設插槽就是指沒有名字的插槽，子元件未定義的名字的插槽，父級將會把 未指定插槽的填充的內容填充到預設插槽中。
示例**如下：
1.子元件**定義了乙個預設插槽：
2.父元件給預設插槽填充內容：
3. 展現的內容
注意：1. 父級的填充內容如果指定到子元件的沒有對應名字插槽，那麼該內容不會被填充到預設插槽中。
2. 如果子元件沒有預設插槽，而父級的填充內容指定到預設插槽中，那麼該內容就「不會」填充到子元件的任何乙個插槽中。
3. 如果子元件有多個預設插槽，而父元件所有指定到預設插槽的填充內容，將「會」 「全都」填充到子元件的每個預設插槽中。
作用域插槽的概念和使用比較難於理解，通過檢視多方資料，做了以下的總結：
描述：作用域插槽其實就是帶資料的插槽，即帶引數的插槽，簡單的來說就是子元件提供給父元件的引數，該引數僅限於插槽中使用，父元件可根據子元件傳過來的插槽資料來進行不同的方式展現和填充插槽內容。
使用方法:
子元件存放乙個帶資料的插槽: mylist和title是子元件傳給父元件的引數
父元件通過 「slot-scope」 來接收子元件傳過來的插槽資料，再根據插槽資料來填充插槽的內容
展現的效果：
常用場景（以下為常用的情況之一）
如果子元件中的某一部分的資料，每個父元件都會有自己的一套對該資料的不同的呈現方式，這時就需要用到作用域插槽。
理解Vue插槽
在vue開發中，我們多採用元件化開發。元件化開發最大特點就是對頁面結構化劃分，元件的復用。而在實際中，頁面對元件的需求或許也稍有不同，那麼就需要一種需求 為頁面定製元件，解決的方式便是通過插槽。例項 執行上面 結果 描述 頁面使用多個自定義元件 樣式 略 序號為方便敘述新增的且每個序號指向乙個自定義...
Vue中插槽的理解
插槽，也就是slot，在vue中的作用相當於乙個模板，通過父元件裡的這個模板，就能決定子元件裡使用這個模板的時候，顯不顯示，顯示什麼，怎麼顯示。首先來個簡單的例子 合成元件 yangp child child裡的模板 hellop slot div 顯示的效果 插槽裡可以包含任何模板 包括html，...
例項理解Vue的插槽
先準備乙個情景，你需要用到第三方的元件，比如antd的 預設情況下表頭和內容都是簡單資料，單元格也無法合併，只有基礎的樣式。可能會有一些api可以對 進行簡單的裝飾，比如bordered給 增加邊框size middle 設定 大小，但是依舊是乙個非常簡單的 的列規定了用column實現，內容必須是...