# 插槽(slot)
## 簡介
插槽的目的是讓原來的設備具備更多的擴展性。比如電腦的USB我們可以插入U盤、硬盤、手機、音響、鍵盤、鼠標等等。
## 組件的插槽
>[success] 釋義：子組件需要顯示的內容并非來自本身，而是父組件傳遞進來的.
> 理解：**組件的插槽也是為了讓我們封裝的組件更加具有擴展性**。
## 為什么要使用插槽
先看一個案例，父組件向子組件傳遞的不是簡單數據而一段結構代碼
```
<div id="root">
<child content="<p>Dell</p>"></child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>`,
})
let vm = new Vue({
el: '#root'
})
```
這種寫法有兩個問題：
1. `p`標簽外面會有一層`div`，這個`div`是無法去掉的，有人會想，能不能用`template`代替，其實是不可以的，在這里模版占位符是不能用的。
2. 如果`content`傳遞的內容很多，代碼就會變得很難閱讀。
當我的子組件有一部分內容，是根據父組件傳遞過來的`dom`進行顯示的話，這時候可以換一種語法。
## 使用插槽
~~~
<div id="root">
<child>
<p>Dell</p> //這種語法看起來非常像，用子組件，我向里插入內容
</child>
</div>
Vue.component('child', {
props: {
content:String
},
template: `<div>
<p>hello</p>
<slot></slot> //slot 標簽顯示的內容就是父組件向子組件插入進來的內容
</div>`,
})
let vm = new Vue({
el: '#root'
})
~~~
`<p>Dell</p>`這種語法看起來非常像，用子組我向里插入內容，所以我們把它叫做插槽。
`slot`標簽顯示的內容就是父組件向子組件插入進來的內容。
通過插槽可以更方便的向子組件傳遞`dom`元素，同時子組件只需通過`slot`來使用就可以了。
## 項目中的使用
移動網站中的導航欄、底部tabbar、焦點圖等等
>[success] 我們來看一下導航欄吧
> 導航欄我們必然會封裝成一個組件，比如nav-bar組件
> 一旦有了這個組件，我們就可以在多個頁面中復用了
> 但是，每個頁面的導航是一樣的嗎？No，我以京東M站為例
:-: 
:-: 
:-: 
:-: 
>[warning] vue 2.5.x 插槽用法不一樣 2.6.x，2.6.x可以書寫2.5.x的寫法
> 2.6.x是2019年2.5號更新的。
## 如何去封裝這類的組件呢？
它們也很多區別，但是也有很多共性。
如果，我們每一個單獨去封裝一個組件，顯然不合適：比如每個頁面都返回，這部分內容我們就要重復去封裝。
但是，如果我們封裝成一個，好像也不合理：有些左側是菜單，有些是返回，有些中間是搜索，有些是文字，等等。
## 如何封裝合適呢？
>[success] 抽取共性，保留不同。
最好的封裝方式就是將共性抽取到組件中，將不同暴露為插槽。
一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什么內容。
是搜索框，還是文字，還是菜單。由調用者自己來決定。
