插槽使用場景是:slot（插槽）可以理解為占位符
如果子組件需要顯示的內容并非來自本身，而是父組件傳遞進來的，而假如直接這樣寫，是不可以實現(xiàn)的，因為如果me-component沒有包含一個 <slot> 元素，則任何傳入它的內容都會被拋棄：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<me-component>
<h1>我是header</h1>
</me-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
// 插槽
Vue.component('me-component', {
template:
`<div>
<p>你好</p>
</div>`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
要實現(xiàn)上面的使用場景，可以利用插槽：
<div id="app">
<me-component>
<h1>我是header</h1>
</me-component>
</div>
<script >
Vue.component('me-component', {
template:
`<div>
<p>你好</p>
<slot></slot>
</div>`
})
var vm = new Vue({
el:"#app"
})
</script >
但是，假如使用多個插槽的時候，就需要用具名插槽
<div id="app">
<me-component>
<h1 slot="header">我是header</h1>
<h1 slot="footer">我是footerr</h1>
</me-component>
</div>
<script >
Vue.component('me-component', {
template:
`<div>
<p>你好</p>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>`
})
var vm = new Vue({
el:"#app"
})
另外slot 插槽還可以定義默認值，如果父組件沒有對應的插槽標簽，那么dom上顯示的是<slot ></slot> 標簽里的內容
