主板上的slot的介面「slot1介面」

前言：

vue的slot主要分三種：1. 普通插槽；2. 具名插槽；3. 作用域插槽。

使用插槽是在存在父子關係的組件中使用，我們可以在子組件中決定插槽的位置，同時子組件也可以給這些插槽的默認信息，當父組件中沒有需要給子組件插槽插入信息時，顯示的是子組件插槽定義的默認信息，下邊簡單說下vue這三種插槽如何使用。

準備工作：

很簡單，就創建父組件testSlot.vue，子組件children.vue，並在testSlot組件中註冊引入children組件。

一 普通插槽的使用：

普通插槽：<slot></slot>

在子組件中定義一個普通插槽：

在開發中我們經常使用到組件之間的傳值，但很多情況涉及到的都是數據屬性的傳值，比如父組件將msg傳給子組件：

現在如果是這種情況：

如果子組件中沒有使用插槽的情況下：

瀏覽器中的頁面，父組件中的p標籤的內容是不會還給子組件的：

這時候，想讓父組件定義的p標籤傳給子組件並顯示，可以在子組件中定義一個默認插槽：

在子組件中，你也可以定義多個默認插槽，並在子組件中決定這些默認插槽的位置，父組件要插入的內容，都會被填充到這些默認的插槽中：

當然，父組件定義要插入到子組件的插槽的內容，並不一定只有是dom結構類型的，也可以是一個組件，也可以是普通的數據結構，只要子組件有定義插槽，就會把內容填充進去。

二 具名插槽的使用：

具名插槽：<slot name=”名稱”></slot>

vue 2.6.0 版本使用具名插槽和作用域插槽有了新的統一語法，使用v-slot替換了之前的slot和slot-scope

什麼叫具名插槽？

其實就是在子組件中定義插槽時，給對應的插槽分別起個名字，方便後邊插入父組件將內容根據name來填充對應的內容。

子組件中，定義兩個具名插槽：

父組件中：

為了驗證，子組件中的插槽可以填充任何結構的內容，所以我這邊專門在one_slot插槽中插入一個組件，而在two插槽就單純插入一串普通的數據

頁面結果：

當然，子組件可以定義多個同名的具名插槽：

三 作用域插槽：

作用域插槽：<slot :自定義name=data中的屬性或對象></slot>

通過上邊的默認插槽和具名插槽的使用過程中，發現，基本都是父組件中決定要插入到子組件中的內容，而子組件自行決定插槽的位置。

具名插槽，就是實現在子組件中自行決定自己要顯示什麼內容。

a.子組件：

b.父組件：

這種時候有一種情況需要注意：

如果子組件中只有一個作用域插槽時，父組件可以使用下邊這種簡單的寫法，當然規範點還是加上template模板標籤好點：

頁面效果：

但是當子組件中有多個作用域插槽時，不建議上邊這種簡單的寫法，因為可能會出現作用域不明確的問題。

子組件有多個作用域插槽時：

父組件使用這種規範的寫法，可以避免有時作用域不明確問題：

頁面效果：