屬于每次面試都會被問到，懂但是不知道咋說那種（好吧，主要是我菜我不會），所以今天專門整理一下
我學一個新東西一般都是“3W1H”
What是什么
Vue 實現(xiàn)了一套內(nèi)容分發(fā)的 API破托，將<slot>元素作為承載分發(fā)內(nèi)容的出口。說白了slot就是個槽口就是個坑（此坑非彼坑）歧蒋，你在使用組件時可以拿內(nèi)容去填坑土砂，子組件在自己的模板中去渲染父組件傳遞過來的內(nèi)容。
Why 為什么用
豐富組件內(nèi)容和布局的靈活性谜洽，增強組件的擴展性和實用性萝映，讓用戶可以去更好地復用組件和對其做定制化處理
Where在哪用
其實知道了為什么用就大致知道了在哪用，這個沒有硬性要求阐虚。例如如果父組件在使用到一個復用組件的時候序臂，在不同的地方有少量的更改，這種情況沒有必要去重寫实束，此時我們就可以使用插槽奥秆。當然還需根據(jù)自己項目實際情況來，不做過多贅述
How怎么用
插槽分為三種：默認插槽咸灿、具名插槽以及作用域插槽
常規(guī)使用組件
//APP.vue
<my-slot></my-slot>
MySlot內(nèi)容
<p>this is start</p>
<p>this is end</p>
- 默認插槽：
父組件在子組件<slot> </slot>處插入內(nèi)容
<my-slot :name="name">
<p>該我表演了</p>
</my-slot>
子組件：
<p>this is start</p>
<slot></slot>
<p>this is end</p>
檢查代碼元素构订，發(fā)現(xiàn)以上代碼就相當于
有的小伙伴可能會問那它有沒有默認值呢，我們之前學過的很多東西都有默認值避矢，例如函數(shù)參數(shù)悼瘾，props，provide/inject等等审胸，答案是有的亥宿，我們直接在槽口里面寫入默認模版/代碼即可，如
//父組件
<my-slot></my-slot>
//子組件
<p>this is start</p>
<slot><span> 如果你看到我砂沛，那我就是默認值烫扼，沒有人和我玩</span></slot>
<p>this is end</p>
以上代碼就相當于
如果我們派發(fā)不止一個元素那將顯示哪個呢？第一個尺上？最后一個材蛛？還是所有
光說沒用，咱得試試
//父組件
<my-slot :name="name">
<p>該我表演了</p>
<span>瞅瞅</span>
<button>click Me! click Me!</button>
</my-slot>
如果我們有多個槽口呢怎抛？都顯示嗎卑吭？
//子組件
<p>this is start</p>
<slot><span> 如果你看到我，那我就是默認值马绝，沒有人和我玩</span></slot>
<slot><span> 如果你看到我豆赏，那我就是默認值，沒有人和我玩</span></slot>
<slot><span> 如果你看到我，那我就是默認值掷邦，沒有人和我玩</span></slot>
<p>this is end</p>
那可不白胀，都顯示了呢
還有沒有問題，沒有問題我提了啊抚岗。如果我要指定某元素派發(fā)到某槽口呢或杠？例如剛剛你是發(fā)傳單，見人就發(fā)宣蔚，現(xiàn)在我只讓你發(fā)給穿黃衣服的人向抢。也就是我們現(xiàn)在要在父組件中，精確的在想要的位置胚委，插入對應的內(nèi)容呢挟鸠，這就引出了具名插槽
- 具名插槽
怎么樣能讓原有插槽成為具名插槽呢，倒也簡單亩冬，給插槽命一個名即可艘希，即添加name屬性。
//子組件
<p>this is start</p>
<slot name="title"
><span> 如果你看到我硅急，那我就是默認值覆享，沒有人和我玩</span></slot
>
<slot name="con"
><span> 如果你看到我，那我就是默認值铜秆，沒有人和我玩</span></slot
>
<slot name="btn"
><span> 如果你看到我淹真，那我就是默認值，沒有人和我玩</span></slot
>
<p>this is end</p>
父組件通過v-slot : name 的方式添加內(nèi)容：
<my-slot>
<template v-slot:title>
<p>該我表演了</p>
</template>
<template v-slot:con>
<span>瞅瞅</span>
</template>
<template v-slot:btn> <button>click Me! click Me!</button> </template>
</my-slot>
注：為了方便连茧，書寫 v-slot:xx 的形式時，可以簡寫為 #xx巍糯。自己可以試試啸驯，我就不演示了
另外說一點插槽名也是有默認值的，默認值很默認祟峦，那就是default罚斗。。宅楞。例如
//子組件
<p>this is start</p>
<slot name="title"
><span> 如果你看到我针姿，那我就是默認值，沒有人和我玩</span></slot
>
<slot name="con"
><span> 如果你看到我厌衙，那我就是默認值距淫，沒有人和我玩</span></slot
>
<slot><span> 如果你看到我，那我就是默認值婶希，沒有人和我玩</span></slot>
<slot name="btn"
><span> 如果你看到我榕暇，那我就是默認值，沒有人和我玩</span></slot
>
<p>this is end</p>
- 作用域插槽
插槽和模版都有編譯作用域，父級模板里的所有內(nèi)容都是在父級作用域中編譯的彤枢；子模板里的所有內(nèi)容都是在子作用域中編譯的狰晚。父組件不能直接使用子組件內(nèi)的數(shù)據(jù)，那怎么才能訪問子組件作用域缴啡，使用子組件的數(shù)據(jù)呢壁晒？我們把需要傳遞的內(nèi)容綁到 <slot> 上，然后在父組件中用v-slot設置一個值來接收我們傳遞過來的數(shù)據(jù)：
//父組件
<my-slot>
<template #testdata="slotfirstProps">
{{ slotfirstProps.value1 }}
</template>
<template #default="slotsecondProps">
{{ slotsecondProps.value2 }}
</template>
</my-slot>
//子組件
<div>
<p>this is start</p>
//d1业栅、d2都是我定義在data中的數(shù)據(jù)
<slot name="testdata" :value1="d1"> 這就是默認值1</slot>
<slot :value2="d2"> 這就是默認值2 </slot>
<p>this is end</p>
</div>
鐺鐺鐺～完結撒花讨衣，如有不對歡迎指正。覺得有幫助的話記得點個贊哦
