一，插槽的基础概念
在之前使用组件的时候，就是直接使用这个自定义的标签，而没有在里面增加内容。
例如：
Vue.component('test-tom',{
data:function(){return {num:0}},
template:`
<div>
<div>TOM:{{num}}</div>
</div>
`
})
var vm= new Vue({
el:'#app'
})
<div id="app">
<test-tom>这里没有信息</test-tom>
</div>
也就是这中间如果还想增加一些html结构，或者说是内容，则显示不出来，为了解决这一问题，又出现了组件插槽的概念，实际上就是在模板字符串中预留一个插槽，如果有额外的html结构，就可以插入到这里。
Vue.component('test-tom',{
data:function(){return {num:0}},
template:`
<div>
<div>TOM:{{num}}</div>
<slot></slot>
</div>
`
})
var vm= new Vue({
el:'#app'
})
<div id="app">
<test-tom>这里没有信息</test-tom>
</div>
因为插槽是规定的，所以只能用
值得注意的是，slot里面还可以写默认参数，也就是使用自定义标签时，如果没有参数，则页面会显示默认参数：
<div id="app">
<test-tom></test-tom>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
Vue.component('test-tom',{
data:function(){return {num:0}},
template:`
<div>
<div>TOM:{{num}}</div>
<slot>这是定义的默认参数</slot>
</div>
`
})
var vm= new Vue({
el:'#app'
})
</script>
二，具名插槽的用法
在上文中，如果有思考就会发现，插槽的作用让组件可以增加一些自定义的html结构，以适应不同的业务需求，就像机械设计一样，比如滚珠丝杠的设计，螺母上的法兰有无，安装孔的位置，就需要对应不同的客户需求做出一定的变更。
但是,slot插槽存在巨大的局限性，它只有一个！也就是说，只能限定在固定的地方做出修改，这太low了，于是就有了具名插槽。
实际上模板字符串中定义多个插槽，使用自定义标签时，需要在哪个插槽中添加内容，就使用哪个插槽！
<div id="app">
<test-tom>
<button slot="first">自行添加的按钮，放在定义名字的slot中</button>
这是定义的默认参数会放到不定义名字的slot中
</test-tom>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
Vue.component('test-tom',{
data:function(){return {num:0}},
template:`
<div>
<div>TOM:{{num}}</div>
<slot></slot>
<input type="text" />
<slot name="first"><slot>
</div>
`
})
var vm= new Vue({
el:'#app'
})
</script>
三，作用域插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<style type="text/css">
#app{
width: 20%;
margin: 200px auto;
border: 1px solid #ccc;
line-height: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<fruit-list :list="list">
<template slot-scope='slotprops'>
<!-- 通过template的slot-scope获取 子组件传过来的数据，存在slotprops对象中 -->
<strong v-if='slotprops.info.id==3' class="current">{{slotprops.info.name}}</strong>
<span v-else>{{slotprops.info.name}}</span>
</template>
</fruit-list>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
Vue.component('fruit-list',{
props:['list'],
template:`
<div>
<li :key='item.id' v-for='item in list'>
<slot :info='item'></slot>
</li>
</div>
`
//通过:info='item把数据传递给父组件
})
var vm= new Vue({
el:'#app',
data:{
list:[{
id:1,
name:'apple'
},
{
id:2,
name:'orange'
},
{
id:3,
name:'banana'
}]
}
})
</script>
</body>
</html>