1.概述：

簡單來說，假如父組件需要在子組件內放一些DOM，那麽這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。

2.默認情況下

父組件在子組件內套的內容，是不顯示的。

代碼：

效果圖：

顯示內容是一個button按鈕，不包含span標簽裏面的內容；

3.單個slot

簡單來說，只使用這個標簽的話，可以將父組件放在子組件的內容，放到想讓他顯示的地方。

代碼：

例如這樣寫的話，結果是：

<button><span>12345</span>為了明確作用範圍，所以使用button標簽</button>

效果圖：

即父組件放在子組件裏的內容，插到了子組件的<slot></slot>位置；

註意，即使有多個標簽，會一起被插入，相當於用父組件放在子組件裏的標簽，替換了<slot></slot>這個標簽。

4.具體命名 slot

將放在子組件裏的不同html標簽放在不同的位置

父組件在要分發的標簽裏添加 slot=”name名” 屬性

子組件在對應分發的位置的slot標簽裏，添加 name=”name名” 屬性，

然後就會將對應的標簽放在對應的位置了。

代碼：

顯示結果為：

<button>
    <span slot="first">12345</span>
    為了明確作用範圍，
    <span slot="second">56789</span>
    所以使用button標簽
</button>

效果圖：

5.分發內容的作用域：

被分發的內容的作用域，根據其所在模板決定，例如，以上標簽，其在父組件的模板中（雖然其被子組件的children標簽所包括，但由於他不在子組件的template屬性中，因此不屬於子組件），則受父組件所控制。

代碼：

6.當沒有分發內容時的提示：

假如父組件沒有在子組件中放置有標簽，或者是父組件在子組件中放置標簽，但有slot屬性，而子組件中沒有該slot屬性的標簽。

那麽，子組件的slot標簽，將不會起到任何作用。

除非，該slot標簽內有內容，那麽在無分發內容的時候，會顯示該slot標簽內的內容。

代碼：

效果圖：

7.假如想控制子組件根標簽的屬性

（1）

（2）

vue2.0 slot 分發內容