一，插槽的基礎概念
在之前使用元件的時候，就是直接使用這個自定義的标簽，而沒有在裡面增加内容。
例如：
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>