solt
第一種用法
父組件
<templateSolt></templateSolt>
<templateSolt>
<p>slot分發了內容</p>
</templateSolt>
子組件
<div>
<h1>這是slot子組件</h1>
<slot>
如果slot沒有分發內容。
</slot>
</div>
效果圖如下
我得理解，slot在父組件有內容時，顯示為父組件得內容，覆蓋了子組件，如果父組件沒有內容，則顯示子組件
第二種用法
這種用法是我們用得比較多得，這種是具名得slot
父組件
<templateSlotNamed>
<h1 slot="footer">footer</h1>
<h1 slot="header">header</h1>
<h1>Default content</h1>
</templateSlotNamed>
子組件
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
效果圖如下
我把父組件的header和footer更換了位置，
是為了證明一件事，就是實際內容的顯示是由子組件的位置決定的。