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更換了位置，

是為了證明一件事，就是實際內容的顯示是由子組件的位置決定的。

轉載于:https://www.cnblogs.com/neilniu/p/9883161.html

總結

以上是生活随笔為你收集整理的vue 关于solt得用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。