插槽分三种：普通插槽、具名插槽、作用域插槽
普通插槽
普通插槽的使用主要通过
<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
标签属性中定义的相同）