作用域
在介紹slot前，需要先知道一個概念：編譯的作用域。比如父組件中有如下模板：
<child-component>
{{message}}
<child-component>
這里的message就是一個slot，但是它綁定的是父組件的數據，而不是組件< child-component >的數據。
父組件模板的內容是在父組件作用域內編譯，子組件模板的內容是在子組件作用域內編譯。
<div id="app">
<child-component v-show="showChild"></child-component>
</div>
<script>
Vue.component('child-component',{
template: '<div>子組件</div>'
});
var app = new Vue({
el: '#app',
data: {
showChild: true
}
});
</script>
這里的狀態showChild綁定的是父組件的數據，如果想在子組件上綁定，那應該是：
<div id="app">
<child-component></child-component>
</div>
<script>
Vue.component('child-component',{
template: '<div v-show="showChild">子組件</div>',
data: function () {
showChild: true
}
});
var app = new Vue({
el: '#app'
});
</script>
因此，slot分發的內容，作用域是在父組件上的。
slot用法
單個slot：
在子組件使用特殊的< slot >元素就可以為這個子組件開啟一個 slot（插槽），在父組件模板里，插入在子組件標簽內的所有內容將替代子組件的< 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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>單個slot</title>
</head>
<body>
<div id="app">
<cild-component>
<p>分發的內容</p>
<p>更多分發的內容</p>
</cild-component>
</div>
<script>
Vue.component('child-component',{
template: '\
<div>\
<slot>\
<p>如果父組件沒有插入內容，我將作為默認出現</p>\
</slot>\
</div>'
});
var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
子組件child-component的模板內定義了一個< slot >元素，並且用一個< p >作為默認的內容，在父組件沒有使用slot時，會渲染這段默認的文本；如果寫入了slot，那就會替代整個< slot >標簽。
上面示例渲染后的結果為：
<div id="app"> <div> <p>分發的內容</p> <p>更多分發的內容</p> </div> </div>
注意：子組件< slot >內的為備用內容，它的作用域是子組件本身。
具名slot：
給< slot >元素指定一個name后可以分發多個內容，具名slot可以與單個slot共存。
<div id="myApp">
<child-component>
<h2 slot="header">標題</h2>
<p>正文內容</p>
<p>更多的正文內容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template: '\
<div class="container">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
});
var myApp = new Vue({
el: '#myApp'
});
</script>
子組件內聲明了3個< slot >元素，其中在< div class=“main” > 內的 < slot >沒有使用name特性，它將作為默認slot出現，父組件沒有使用slot特性的元素與內容都將出現在這里。
如果沒有制定默認的匿名slot，父組件內多於的內容片斷都將被拋棄。
渲染結果：
<div class="container"> <div class="header"> <h2>標題</h2> </div> <div class="main"> <p>正文內容</p> <p>更多的正文內容</p> </div> <div class="footer"> <div slot="footer">底部信息</div> </div> </div>
文章同步發布： https://www.geek-share.com/detail/2783995082.html
參考文章：