vue組件中的API有三個，分別是props，events與slot。前兩個分別為傳參和觸發事件，slot實現的是內容分發。最近使用elementUI中的組合搜索框或者添加其他自定義內容時會用到此屬性。它相當於AngularJS中的transclusion，意為插槽。
vue中的組件，可謂是相當重要的內容。slot的主要作用就是組件的組合，用來擴展組件。簡單來說：
<bigbig> <smallsmall></smallsmall> </bigbig>
這樣將兩個自定義的組件組合起來，父組件<bigbig>也許會有自己的模板，這樣<smallsmall>在里面就很尷尬，它需要一個明確的定義如何顯示。此時便需要使用slot。
1.單個slot
它的含義指的就是組件模板中包含一個slot。就上個例子來說，如果<bigbig>不包含<slot>，那么<bigbig>自己本身模板中的內容將會被拋棄，只顯示<smallsmall>。如果包含slot，那么<smallsmall>將會插入<slot>的內容中並且替換掉它。<slot>標簽中也可以攜帶內容，當沒有內容插入時，將顯示slot標簽中的內容。舉個例子：
假定組件<bigbig>有如下模板：
<div> <p>我是組件里自帶的段落~</p> <slot>如果沒有需要插入的內容，就顯示我啦~</slot> </div>
現在我們要渲染以下代碼：
<bigbig> <p>我是需要渲染的內容~</p> </bigbig>
將顯示什么結果呢？答案是先顯示“我是組件里自帶的段落~”再顯示“我是需要渲染的內容~”。因為我們已經將其插入slot中了，並替換掉了slot中的內容。如果我們沒有需要插入的內容，則會顯示slot原本中的內容“如果沒有需要插入的內容，就顯示我啦~”
2.具名slot
它的含義簡單來說就是帶有名字的slot。當插槽不止一個時，為了區分他們，則需要帶上名字，用法和單個slot本質上是一樣的。
假定組件<bigbig>有如下模板：
<div> <slot name=‘one’></slot> <slot></slot> <slot name=‘two’></slot> </div>
接下來渲染：
<bigbig> <p slot='one'>111</p> <p slot='two'>222</p> <p>code</p> </bigbig>
渲染結果為：111 code 222 。對應名稱插入到對應的插槽。
3.作用域插槽
作用域插槽本質上是可以傳遞數據的插槽，類似於函數的傳參。原來父組件可以通過綁定數據傳遞給子組件。作用域插槽就可以通過子組件綁定數據傳遞給父組件。在vue 2.5.0+ slot-scope不再限制在<template>元素上使用，而可以用在插槽內的任何元素或組件上。以下示例代碼為轉載：
<ul> <li v-for="todo in todos" v-bind:key="todo.id" > <!-- 我們為每個 todo 准備了一個插槽，--> <!-- 將 `todo` 對象作為一個插槽的 prop 傳入。--> <slot v-bind:todo="todo"> <!-- 回退的內容 --> {{ todo.text }} </slot> </li> </ul>
<todo-list v-bind:todos="todos"> <!-- 將 `slotProps` 定義為插槽作用域的名字 --> <template slot-scope="slotProps"> <!-- 為待辦項自定義一個模板，--> <!-- 通過 `slotProps` 定制每個待辦項。--> <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }} </template> </todo-list>