插槽分三種：普通插槽、具名插槽、作用域插槽
普通插槽
普通插槽的使用主要通過
<slot></slot>
标簽使用。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插槽的使用</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
//未使用插槽
<com></com>
<hr color="red">
//使用插槽
<com><button type="button">插槽中放入按鈕</button></com>
</div>
<template id="com">
<div id="">
<button type="button">左邊按鈕</button>
<p>中間文字</p>
<slot></slot>
</div>
</template>
<script type="text/javascript">
new Vue({
el: '#app',
components:{
com:{
template:'#com'
}
}
})
</script>
</body>
</html>
結果如下圖，當使用插槽的時候可以在使用同一個Vue元件(component)的情況下在插槽位置放入不同的标簽，如：程式中的按鈕标簽。
具名插槽
在同一個Vue元件(component)中，放入多個插槽，在使用元件時，如何判斷放入的标簽是哪個插槽中的呢？此時可以使用具名插槽。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插槽的使用</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 未在插槽中放入相應的标簽，使用預設值 -->
<com></com>
<hr color="red">
<!-- 僅改變中間的插槽，左右插槽此時使用預設值 -->
<com><span slot="center">僅改變中間的插槽</span></com>
<hr color="#0000FF">
<!-- 插槽全部更改 -->
<com>
<button type="button" slot="left">左邊換為按鈕</button>
<span slot="center">改變中間</span>
<img src="3.gif" slot="right">
</com>
</div>
<template id="com">
<div id="">
<slot name="left"><span>左邊</span></slot>
<slot name="center"><span>中間</span></slot>
<slot name="right"><span>右邊</span></slot>
</div>
</template>
<script type="text/javascript">
new Vue({
el: '#app',
components:{
com:{
template:'#com'
}
}
})
</script>
</body>
</html>
在上述代碼中
<slot name="right"><span>右邊</span></slot>
意為此插槽預設是
<span>右邊</span>
标簽，在使用Vue元件時不添加标簽時，使用插槽中預設的标簽。該插槽添加
name
屬性，可以在使用時作為區分（區分在那個插槽中添加标簽），使用時代碼如：
<com><span slot="center">僅改變中間的插槽</span></com>
。程式運作結果如下圖：
作用域插槽
作用域插槽是為了讓同一Vue元件表現為不同的形式。（可以看作父元件提供插槽中表現形式，而Vue元件中提供資料），代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作用域插槽</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 插槽的預設形式 -->
<com></com>
<hr color="red">
<!-- 更換插槽内标簽 -->
<com>
<template slot-scope="slotdata">
<!-- 接收Vue元件傳出的值值是用slotdata.data -->
<span>{{slotdata.data.join(' —— ')}}</span>
</template>
</com>
</div>
<template id="com">
<div id="">
<!-- 将mydata的值傳出 -->
<slot :data="mydata">
<ul>
<li v-for="item in mydata">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script type="text/javascript">
var com = {
template:'#com',
data(){
return {
mydata:['C', 'C++', 'Java', 'JavaScript', 'html', 'Python']
}
}
}
new Vue({
el:'#app',
components:{
com
}
})
</script>
</body>
</html>
上述代碼實作了Vue元件的兩種形式，一種是預設的，另一種是通過
slot
插槽實作的。結果如下圖：
第一種是預設的，第二種是自定義的。
在程式中要想将Vue元件的私有資料傳出，需要在
slot
标簽中添加屬性，如：
<slot :data="mydata"></slot>
其中“data”是可以自定義的名稱，而“mydata”是資料源。
父元件接收資料時利用如下方式：
<com>
<template slot-scope="slotdata">
<!-- 接收Vue元件傳出的值值是用slotdata.data -->
<span>{{slotdata.data.join(' —— ')}}</span>
</template>
</com>
com
是自定義的Vue元件，在其中使用Vue的
template
标簽(
template
标簽在Vue2.5.x版本一下時必須要用，在Vue2.5.x以上版本時不是必須的)，在
template
标簽中使用
slot-scope
屬性來接收子元件的資料。并通過
slotedata.data
來得到子元件的資料。（**注意：**其中
slotdata
是自定義的名稱，而
data
也是自定義的名稱，但要與子元件中的
slot
标簽屬性中定義的相同）