單個slot
在children這個標籤裡面放dom，vue不會理你，也就是不會顯示，類似react：this.props.children。
//父
12345//這邊不會顯示
//子components:
}
children:多個slot
這邊需要加name屬性，說白了，多個slot就不像上面單個，需要有個對應關係。
父-> slot="name1"
子->
12345
//子components:
}這邊寫了乙個name1，如果有多個，就插多個，比較簡單。
使用場景「下拉載入更多」的場景在移動端相對來說出現得比較多。我們知道下拉觸底都要監聽觸底事件，觸底的操作也相同（去後台拉取資料），分頁演算法也相同，因此我們會想到把它做成乙個元件，重用這些相同的地方，讓其他地方可以共用這個元件，從而減少**量。
然而，下拉loading並不是乙個可以完全重用的元件，因為列表裡面的內容不同，空白頁（沒有內容時）的內容也可能不同，如果要做成元件，那麼就要考慮到這方面的「不同」，因此我們想到利用vue的內容分發slot來做。下面是本人在開發的時候做的乙個下拉loading，大家可以參考下。
元件**：
0">
意向不到的slot另類用法
我在做需求的時候，做了乙個元件，該元件分為上下兩個部分，這兩個部分耦合度很高（不然我怎麼把它當成乙個元件呢哈哈哈），如下圖所示：
本來c區域是乙個元件，然後產品突然說，需要把這兩個部分分開，把a移到c1的位置，c1移到a的位置（心裡感覺到憋屈）。
這裡我的第乙個想法就是拆開來做成兩個元件，但是問題來了，之前這兩部分的耦合度很高，如果強制把它拆開成兩個元件，那麼這兩個元件之間的互動必然會多很多。比如，c1改變了某個東西會影響到c2，那麼c1需要觸發事件通知父元件，父元件再呼叫c2的某個方法來更新狀態。這種跨元件之間的通訊在元件之間頻繁互動的情況下，將會是噩夢，而我這邊卻需要頻繁的互動，所以如果把它拆分為兩個元件，那麼工作量和複雜度將會大大的增加。當然，你可以想到通過event hub的方式來實現兩個元件之間的互動，但是根本問題還是沒有實質性得得到解決。
那麼，有什麼方法可以做到不拆分成兩個元件又能移動位置的方法呢，答案就是slot。以我的例子為例，把a和b作為c的內容分發，原來是這樣的:
總結
vue的slot不僅可以用來內容分發，還可以用來做位置調整。如果在需要拆分元件來做位置調整，又不想因為拆分耦合度很高的元件，可以考慮使用slot來進行位置調整。一點愚見，希望對大家有所幫助。
玩轉vue的slot內容分發
單個slot 在children這個標籤裡面放dom，vue不會理你，也就是不會顯示，類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑，等著父元件給填上，這邊 slot 代...
Vue之slot內容分發
內容分發，使用特殊的元素作為原始內容的插槽，假設父元件需要在子元件內讓一些dom，那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示，就是slot分發負責的活。可以將父元件放在子元件的內容，放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...
vue元件 使用插槽分發內容 slot
官網api 使用插槽分發內容 使用元件時，有時子元件不知道會收到什麼內容，這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...