什么是插槽然低？
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示掷伙，父組件可以在這個占位符中填充任何模板代碼是己，如 HTML、組件等任柜，填充的內容會替換子組件的<slot></slot>標簽卒废。
如下代碼：
1. 在子組件中放一個占位符
- 在父組件中給這個占位符填充內容：
- 展示的效果
現(xiàn)在來看看沛厨，如果子組件中沒有放插槽，同樣的父組件中在子組件中填充內容摔认，會是啥樣的：
1. 子組件代碼無插槽：
2. 父組件照常填充內容：
- 展示的效果：
總結：如果子組件沒有使用插槽逆皮，父組件如果需要往子組件中填充模板或者html, 是沒法做到的
插槽的使用
插槽的最最簡單使用，上面已有例子参袱，這里就不寫了电谣，接下來看看，插槽其他使用場景
插槽的使用 - 具名插槽
描述：具名插槽其實就是給插槽取個名字抹蚀。一個子組件可以放多個插槽剿牺，而且可以放在不同的地方，而父組件填充內容時环壤，可以根據(jù)這個名字把內容填充到對應插槽中晒来。
如下代碼：
- 子組件的代碼，設置了兩個插槽(header和footer)：
- 父組件填充內容, 父組件通過 v-slot:[name] 的方式指定到對應的插槽中
3.展示的效果：
接下來再來看看郑现，父組件中填充內容的時候湃崩，順序調換下，看下能不能內容能不能對應上：
1. 子組件代碼不變接箫，父組件代碼中填充順序調換下(如圖攒读，在父組件中，footer 和 header 的填充位置對換)：
- 展示的效果：
由此看出列牺，即使父組件對插槽的填充的順序打亂整陌，只要名字對應上了，就可以正確渲染到對應的插槽中瞎领。即： 父組件填充內容時泌辫，是可以根據(jù)這個名字把內容填充到對應插槽中的
插槽的使用 - 默認插槽
描述： 默認插槽就是指沒有名字的插槽，子組件未定義的名字的插槽九默，父級將會把 未指定插槽的填充的內容填充到默認插槽中震放。
示例代碼如下：
1.子組件代碼定義了一個默認插槽：
2.父組件給默認插槽填充內容：
3. 展現(xiàn)的內容
注意：
父級的填充內容如果指定到子組件的沒有對應名字插槽，那么該內容不會被填充到默認插槽中驼修。
如果子組件沒有默認插槽殿遂，而父級的填充內容指定到默認插槽中，那么該內容就“不會”填充到子組件的任何一個插槽中乙各。
如果子組件有多個默認插槽墨礁，而父組件所有指定到默認插槽的填充內容，將“會” “全都”填充到子組件的每個默認插槽中耳峦。
具名插槽的內容必須使用模板<template></template>包裹
插槽的使用 - 作用域插槽
作用域插槽
父組件模板的所有東西都會在父級作用域內編譯恩静；子組件模板的所有東西都會在子級作用域內編譯。
不過，我們可以在父組件中使用slot-scope特性從子組件獲取數(shù)據(jù)
前提是需要在子組件中使用:data=data先傳遞data的數(shù)據(jù)
<body>
<div id="app">
<child>
<!-- template是固定寫法驶乾，props是傳遞過來的值 -->
<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
</child>
</div>
<script>
var child = {
data : function(){
return {
lists : [1,2,3,4,5,6]
}
},
template : `<div>
<ul>
<slot
v-for="item of lists"
:item=item
></slot>
</ul>
</div>`
}
var vm = new Vue({
el : "#app",
components : {
child : child
}
})
</script>
</body>
