一、什麼是插槽

官方解釋：Vue 實現了一套內容分發的 API，將<slot>元素作為承載分發內容的出口。

大白話：插槽就是子元件中的提供給父元件使用的一個佔位符，用<slot></slot> 表示，父元件可以在這個佔位符中填充任何模板程式碼，如 HTML、元件等，填充的內容會替換子元件的<slot></slot>標籤。

二、基本用法

1、在子元件中放一個佔位符

<template>
<div>
<div>我是子元件</div>
<div>
<slot></slot
 
>
</div>
</div>
</template>

2、在父元件中給這個佔位符填充內容

<template>
<div>
<childTest>
<p>我就測試一下插槽的</p>
</childTest>
</div>
</template>

<script>
importchildTestfrom'./ChiledTests'
exportdefault{
components:{
childTest
}
}
</script>

效果：

三、具名插槽的使用

描述：具名插槽其實就是給插槽取個名字。一個子元件可以放多個插槽，而且可以放在不同的地方，而父元件填充內容時，可以根據這個名字把內容填充到對應插槽中。

程式碼如下：

1、子元件程式碼

<slot>元素特殊的 attribute：name屬性，設定對應的插槽名稱

一個不帶name屬性的<slot>元素的出口實際預設的name值是default

<template>
<div>
<div>我是子元件</div>
<div>
<slot></slot>
</
 
div>
<div>
<slotname="header"></slot>
</div>
</div>
</template>

2、父元件使用

在一個<template>元素上使用v-slot指令，並以v-slot:[name]的形式提供其名稱：

注意：v-slot只能新增在<template>上(除非下面第3點中的情況)

template>
<div>
<childTest>
<p>我就測試一下插槽的</p>
<templatev-slot:header><h1>我是標題哦</h1></template>
</childTest>
</div>
</template>

<script>
importchildTestfrom'./ChiledTests'
exportdefault{
components:{
childTest
}
}
</script>

效果：

3、當被提供的內容只有預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把v-slot直接用在元件上：

子級：

<template>
  <div>
    <div>我是子元件</div>
      <slot :userObj2="user"></slot>
    </div>
  </div>
</template>

父級：

<template>
  <div>
    <childTest v-slot:default="{ userObj2 }">
      {{userObj2}}
    </childTest>
  </div>
</template>

<script>
import childTest from './ChiledTests'
export default {
  components:{
    childTest
  }
}
</script>

四、作用域插槽

平時用的比較多的可能就是這個；作用域插槽：將只能在子元件訪問的資料傳遞出去，父元件呼叫子元件時可以通過設定的引數訪問到在子元件的資料（個人理解——類似於父子級之間的傳值props傳值）

1、子元件傳遞引數——將需要傳遞出去的資料，通過一個自定義的屬性繫結上去v-bind:[data]=”data”

<template>
<div>
<div>我是子元件</div>
<div>
<slot></slot>
</div>
<div>
<slotname="header"></slot>
</div>
<div>
<slotname="content":userObj="user"></slot>
</div>
</div>
</template>

2、父元件接受傳遞出來的引數

父元件通過v-slot:[name]=”自定義data引數名”,name為<slot>具名引數的名稱，預設為default,這裡為了與預設的插槽區分，定義為content

<template>
<div>
<childTest>
<p>我就測試一下插槽的</p>
<templatev-slot:header><h1>我是標題哦</h1></template>
<templatev-slot:content="useDate">
<p>{{useDate.userObj.name}}</p>
</template>
</childTest>
</div>
</template>

<script>
importchildTestfrom'./ChiledTests'

效果：

五、解構插槽 Prop

作用域插槽的內部工作原理是將你的插槽內容包裹在一個擁有單個引數的函式裡；所以上面例子的父級元件中要獲取到name屬性——userDate.userObj.name

但是我們也可以通過解構複製來使獲取到的資料更為簡潔；

<templatev-slot:content="{userObj}">
<p>{{userObj.name}}</p>
</template>

尤其是在該插槽提供了多個引數的時候。它同樣開啟了引數重新命名等其它可能，例如將userObj重新命名為personObj：

<templatev-slot:content="{userObj:personObj}">
<p>{{personObj.name}}</p>
</template>

效果和上面一樣。

參考自：

1、https://www.cnblogs.com/mandy-dyf/p/11528505.html

2、https://cn.vuejs.org/v2/guide/components-slots.html