Vue爲何要有插槽

通常來講父組件只能複用子組件可是沒辦法改變子組件的內容和樣式 總之就是 你能夠用我可是不能夠改變我

就像買車同樣 不能本身去決定車的配置、外觀、性能、尺寸，這些都是廠家本身設計好而後批量生產的 你們買下都是同樣的

而插槽的出現就提供了父組件能夠改造子組件的能力 至關於你對本身的車實現了私人訂製

Vue中插槽分爲三種 下面我以車比做子組件來解析

1.具名插槽（側重於改變子組件內容）

在子組件template屬性中添加多個slot標籤 而這個slot標籤都各自帶有本身的name屬性 屬性值都不同

<slot name="AAA"></slot>
<slot name="BBB"></slot>
<slot name="CCC"></slot>

父組件能夠對應不一樣的name值 把相對應的內容 插入到各自slot標籤裏
slot標籤內能夠包裹任意原子組件的內容 插入的內容將會替換掉它

（就像在車上不一樣的位置對應加裝不一樣的配件）

二、默認插槽（側重於改變子組件內容）

在子組件template屬性中添加一個slot標籤 而這個slot標籤不帶name屬性

<slot></slot>

父組件裏任何內容都默認加到這個slot標籤裏
slot標籤內能夠包裹任意原子組件的內容 插入的內容將會替換掉它

（就像在車上默認只在車頂這一個地方加裝行李架 全部配件都是放到車頂作行李架的）

三、做用域插槽（側重於改變子組件樣式）

父組件複用子組件的時候 對某一個子組件內容樣式不滿意 此時在 子組件內你但願改變的那部份內容外 包裹一個slot標籤 給slot自定義一個屬性<slot :data="xxx"></slot>（名稱本身起）父組件模板定義一個slot-scope="slot"屬性 模板內經過slot.xxx能夠拿到子組件的數據 拿到數據後就好辦了 能夠任你蹂躪了 你想把它弄成什麼樣就弄成什麼樣
父組件改變了子組件的樣式 可是內容仍是子組件的

<div id="app">
<child>
<template slot-scope="slot"> //Vue2.5.xxx版本如下只能用template模板 以上能夠自定義
<span v-for="item in slot.data"></span>
</template>
</child>
</div>

<template id="child">
<div>
<slot :data="listData">
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
</slot>
</div>
</template>

（就像是你對車身顏色不滿意 你把灰色改爲了白色可是車仍是原來的車）

組件的插槽是爲了讓咱們封裝的組件更加具備擴展性。咱們在路上看到的吉普牧馬人基本上絕大多數都是被改裝過的，有的改裝事後更加的好看，有的更加霸氣，有的攀爬能力大大提升， 牧馬人之因此能夠輕易被改裝，就是由於他天生的越野基因和改裝潛力，咱們在封裝組件的時候也是也是同樣的，要儘量地預備插槽，提高組件的「改裝潛力」，好比移動網站的導航欄，移動開發中幾乎每一個頁面都有導航欄，可是每一個頁面的導航欄都是同樣的嗎？NO! 導航欄咱們必然要封裝成一個插件，好比nav-bar組件，一旦有了這個組件，咱們就能夠在多個頁面進行復用了。