Vue - Scoped Slot

Vue - Scoped Slot

總結一下 Vue Slot (這可能是Vue中比較難理解的東西)

Example: http://jsfiddle.net/albertdong/xnevpb0f/133/

slot 是為了處理子組件開口與閉口標籤之間的內容而生。這樣父組件就有機會改變一些子組件的內容。

<child>
想要插入的內容…
</child>

子組件用 slot 標籤預留插值位置，可以有名稱也可沒有(沒有名稱的名稱就叫做default)

父組件使用子組件(標籤)時，使用 template 標籤(非必要)將子組件開口與閉口標籤之間的內容取代上面子組件的slot標籤。

如果子組件聲明的 slot 標籤有名稱時父組件可以使用 slot 屬性指定名稱表示要放在哪個 slot，否則都會取代那個沒有名稱的 default slot 。