Vue為什么要有插槽

一般來說父組件只能復用子組件但是沒辦法改變子組件的內容和樣式 總之就是 你可以用我但是不可以改變我

就像買車一樣 不能自己去決定車的配置、外觀、性能、尺寸，這些都是廠家自己設計好然后批量生產的 大家買下都是一樣的

而插槽的出現就提供了父組件可以改造子組件的能力 相當于你對自己的車實現了私人訂制

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

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

在子組件template屬性中添加多個slot標簽 而這個slot標簽都各自帶有自己的name屬性 屬性值都不一樣

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

父組件可以對應不同的name值 把相對應的內容 插入到各自slot標簽里
slot標簽內可以包裹任意原子組件的內容 插入的內容將會替換掉它

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

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

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

<slot></slot>

父組件里任何內容都默認加到這個slot標簽里
slot標簽內可以包裹任意原子組件的內容 插入的內容將會替換掉它

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

3、作用域插槽（側重于改變子組件樣式）

父組件復用子組件的時候 對某一個子組件內容樣式不滿意 此時在 子組件內你希望改變的那部分內容外 包裹一個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>

（就像是你對車身顏色不滿意 你把灰色改成了白色但是車還是原來的車）

組件的插槽是為了讓我們封裝的組件更加具有擴展性。我們在路上看到的吉普牧馬人基本上絕大多數都是被改裝過的，有的改裝過后更加的好看，有的更加霸氣，有的攀爬能力大大提高， 牧馬人之所以可以輕易被改裝，就是因為他天生的越野基因和改裝潛力，我們在封裝組件的時候也是也是一樣的，要盡可能地預備插槽，提升組件的“改裝潛力”，比如移動網站的導航欄，移動開發(fā)中幾乎每個頁面都有導航欄，但是每個頁面的導航欄都是一樣的嗎？NO! 導航欄我們必然要封裝成一個插件，比如nav-bar組件，一旦有了這個組件，我們就可以在多個頁面進行復用了。