作为对Component的补充，Vuejs 增加了 Slot 这个功能.
我们从具体的例子来说明。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<study-process>
我学习到了Slot 这个章节。
</study-process>
</div>
<script>
Vue.component('study-process', {
data: function () {
return {
count: 0
}
},
template: '<div><slot></slot></div>'
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
从上面的代码从，我们可以看到，我们先是定义了一个 component:
Vue.component('study-process', {
data: function () {
return {
count: 0
}
},
template: '<div><slot></slot></div>'
})
在这个component的template中，是这样的：
template: '<div><slot></slot></div>'
这里就使我们定义的 slot.
然后，我们在调用这个 component的时候，这样：
<study-process>
我学习到了Slot 这个章节。
</study-process>
所以，“我学习到了Slot 这个章节。”就好像一个参数那样传入到了 component中， component 发现自身已经定义了 slot, 就会把这个字符串放到slot的位置，然后显示出来。
如下图所示：
也就是带有名字的slot .
很多时候我们可能需要多个slot. 看下面的例子：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<study-process>
<p slot='slot_top'>
Vuejs 比起别的框架真的简洁好多！
</p>
我学习到了 Slot 这个章节。
<h5 slot='slot_bottom'>
再也不怕H5 项目了~
</h5>
</study-process>
</div>
<script>
Vue.component('study-process', {
template: '<div>' +
'<slot name="slot_top"></slot>' +
'<slot></slot>' +
'<slot name="slot_bottom"></slot>' +
'</div>'
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
上面的代码中， 我们定义了这样的 component:
Vue.component('study-process', {
template: '<div>' +
'<slot name="slot_top"></slot>' +
'<slot></slot>' +
'<slot name="slot_bottom"></slot>' +
'</div>'
})
其中的 <slot name="slot_top"></slot> 就是一个named slot (具备名字的slot) ,这样，在后面对于 component的调用中：
<p slot='slot_top'>
Vuejs 比起别的框架真的简洁好多！
</p>
就会渲染在对应的位置了。
我们可以为 slot 加上默认值。这样当 “父页面” 没有指定某个slot的时候，就会显示这个默认值了。
例如：
<slot name="slot_top">这里 top slot的默认值 </slot>