一.slot
插槽，也就是slot，是元件的一塊HTML模闆，這塊模闆顯示不顯示、以及怎樣顯示由父元件來決定。值得注意的是：内容要寫在父元件中，然後分給需要的子元件，當slot多個時，可以通過name來加以區分，這就是所謂的具名插槽。
舉個例子
父元件：
<template>
<div>
<h3>這是父元件</h3>
<son><span>實踐slot</span></son>
<son>
<template slot="myslot">
<div>
實踐具名slot
</div>
</template>
</son>
</div>
</template> 複制
子元件：
<template>
<div>
<h4>這是子元件</h4>
<input type="text" placeholder="請輸入">
<slot></slot>
<slot name="myslot"></slot>
</div>
</template> 複制
效果：
二.slot-scope
slot-scope就是作用域插槽。官方叫它作用域插槽，實際上，對比具名插槽，我們可以叫它帶資料的插槽。具名插槽在元件的template裡面寫，作用域插槽要求，在slot上面綁定資料。
舉個例子
父元件：
<template>
<div class="father">
<h3>這裡是父元件</h3>
<!--第一次使用：用flex展示資料-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用清單展示資料-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接顯示資料-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的資料, 作用域插槽退變成匿名插槽-->
<child>
我就是模闆
</child>
</div>
</template> 複制
子元件：
<template>
<div class="child">
<h3>這裡是子元件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
} 複制
效果：
三.v-slot
從 vue2.6 開始，Vue 為具名插槽和作用域插槽引入了一個全新的文法，即v-slot 指令。目的就是想統一 slot 和 scope-slot 文法，使代碼更加規範和清晰。
具體使用如下：
1.插槽的名字現在通過 v-slot:slotName 這種形式來使用，如下。
<template v-slot:header> </template> 複制
2.此處需要注意的是， v-slot 隻能添加到 上，這點Vue 2.5中的slot是不同的.
<template v-slot:slotName="data"> </template> 複制
3.正常情況下，假設Test元件注冊及元件模闆如下，
//元件模闆
<template id="test">
<div>
<h3>這裡是test元件</h3>
<slot></slot>
</div>
</template>
//元件注冊
Vue.component('Test', {
template: '#test',
data() {
return {
msg: 'Hello World!'
}
}
}) 複制
當我們需要在下面的p标簽内擷取Test元件資料時，可能往往寫法如下
<Test>
<template v-slot:default>
<p>{{msg}}</p>
</template>
</Test> 複制
但是，由于元件的資料隻能限于目前元件模闆才能使用，是以它通路不了Test元件中的資料，為了解決這個問題，需要給元件模闆中的元素上動态綁定一個對象屬性，綁定到 元素上的屬性我們稱之為 slot props。該對象屬性的名字可以自定義，而屬性值就是Test元件資料的名字，這樣就可以擷取到Test元件中的資料，如下
<slot ：msg="msg"></slot> 複制
同時使用v-slot重構上面代碼。
<Test>
<template v-slot:default="data">//此處的data就是在<slot>中綁定的屬性slot props
<p>{{data.msg}}</p>
</template>
</Test> 複制