先準備乙個情景，你需要用到第三方的元件，比如antd的**，預設情況下表頭和內容都是簡單資料，單元格也無法合併，只有基礎的樣式。可能會有一些api可以對**進行簡單的裝飾，比如bordered給**增加邊框size="middle"設定**大小，但是依舊是乙個非常簡單的**。**的列規定了用column實現，**內容必須是規定的data-source陣列，無法更改任何內容。
但是如果希望像下圖這樣，給表頭增加小圖示，給**內的內容增加樣式，都需要乙個插槽。插槽內的html**就是需要插入指定位置的html。
那子元件怎麼知道這裡有個插槽呢，也就需要在傳入子元件的html中最外層增加slot=' '屬性。
一般來說是，被引用的元件用，希望改變第三方元件的樣式或者要往元件內插入其他內容的
，這個div可以替換成任何閉合元素，例子如下。（注意：繫結的部分在js裡面，template裡面只寫html，這裡展示的是繫結好之後再templa中對基礎元件的更改）
// name是name列整一列的插槽，展示的是把原始的文字}加個鏈結
"name" slot-scope=
"text"
>
}<
/a>
// customtitle是name列表頭的插槽，往這個位置插入 name
"customtitle"
>
"smile-o"
/> name<
/span>
// 繫結了tags列
"tags" slot-scope=
"tags"
>
v-for=
"tag in tags"
:key=
"tag"
:color=
"tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
}<
/a-tag>
<
/span>
// 繫結了actions列
"action" slot-scope=
"text, record"
>
invite 一
}<
/a>
"vertical"
/>
delete<
/a>
"vertical"
/>
="ant-dropdown-link"
> more actions
"down"
/>
<
/a>
<
/span>
<
/a-table>
還有乙個是在子元件內的某個位置定義預設的插槽，此時子元件內的全部html都會被查到這個指定位置。其實預設插槽就是< slot name='default'>比如：
// 父元件
這裡全部會在children
<
/slot>中顯示
<
/children>
//children元件
111<
/slot>
22223333
<
/slot>
<
/template>
111
這裡全部會在children中顯示
222這裡全部會在children中顯示
}是可以不需要template的，但是如果是v-slot比如}這種是只能在template裡面。
而作用域插槽就是父元件想使用子元件的某個屬性了,所以先決條件也是子元件願意在插槽中傳值。
// 子元件傳遞test橋梁
"test"
>
<
/slot>
// 子元件的data定義如下
export
default}}
}
:test="test"就行。
default
="user"
>
}<
/template>
"user"
>
}<
/template>
理解Vue插槽
在vue開發中，我們多採用元件化開發。元件化開發最大特點就是對頁面結構化劃分，元件的復用。而在實際中，頁面對元件的需求或許也稍有不同，那麼就需要一種需求 為頁面定製元件，解決的方式便是通過插槽。例項 執行上面 結果 描述 頁面使用多個自定義元件 樣式 略 序號為方便敘述新增的且每個序號指向乙個自定義...
Vue中插槽的理解
插槽，也就是slot，在vue中的作用相當於乙個模板，通過父元件裡的這個模板，就能決定子元件裡使用這個模板的時候，顯不顯示，顯示什麼，怎麼顯示。首先來個簡單的例子 合成元件 yangp child child裡的模板 hellop slot div 顯示的效果 插槽裡可以包含任何模板 包括html，...
Vue 插槽（slot）的理解
父元件向子元件傳值我們會一般用到props，那傳遞乙個dom節點呢？使用插槽slot，能高效地解決父元件向子元件插入dom節點問題。插槽 在vue中，可以在元件內部定義乙個或多個插槽，子元件決定插槽的位置，也可以設定預設的資訊，父元件在插槽裡插入資訊，有預設資訊時，父元件不插入資訊，則顯示子元件的預...