<slot></slot>　　寫在template模板中

在元件的模板中使用了slot標籤後，該元件在使用時可以在元件標籤內填寫內容，他會自動代替插槽的位置

1.插槽的基本使用<slot></slot>
2,插槽的預設值<slot>button< /slot>
3.如果有多個值，同時放入到元件進行替換菜,一起作為替換元素->

如果你在元件的模板中 <slot><button></button></solt>　在slot標籤內寫了內容，那麼在你使用元件時，若元件內沒有寫內容，他會預設有一個button，但如果你標籤內寫了內容，那麼button就沒有了，取而代之的是你寫的內容。 這麼多文字形容不如看一個栗子： 程式碼截圖

執行效果：

具名插槽的使用　　（便於一個元件複用時能滿足不同需求）

所謂具名插槽：就是在元件模板中新增插槽的時候，給插槽一個name。
<slot name=“插槽名（可以是中文）”>< /slot>
然後在使用元件時，想把內容新增到指定的插槽需要這樣做　　
假設<cpn> 是一個元件　　他的模板內容是 <template> <slotname=“貓貓”><i>哈哈哈</i>< /slot> </template>
<cpn>　<span slot="貓貓">我是name為‘貓貓’的插槽內容</span>　</cpn>
程式碼截圖：

本文來自部落格園，作者：沒有煩惱的貓貓，轉載請註明原文連結：https://www.cnblogs.com/maomao777/p/15821875.html