知道了单个slot插口的用法，具名slot也是很好理解的，
具名slot：就是给每一个slot取一个名字，给插值设置一个slot属性，当插值的slot属性和slot名字相同时，就在给位子插值。若不取名字，则是默认插值的位子。
看下面的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名slot</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child>
<h3 slot="header">我是插入的标题</h3>
<!--此处写slot=“”，下面写的是name=“”-->
<div>
<p>我是 默认的插值</p>
<p>我是 默认的插值</p>
</div>
<!--没有命名的插值，会插入到没有name属性的slot中。-->
<h1 slot="footer">我是插入的页脚 </h1>
<!--此处写的顺序和组件中是不对应的，说明先后顺序不影响-->
</child>
</div>
<script>
Vue.component('child',{
template:'<div> ' +
'<header><slot name="header"><h1>我是slot标题</h1></slot></header>' +
'<main><slot>我是slot主要内容</slot></main>' +
'<footer><slot name="footer"><h3>我是slot页脚标题</h3></slot></footer>' +
'</div>'
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
3845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
