<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<title>具名插槽</title>
</head>
<body>
<div id="root">
<child content="hello">
<p class="header" slot="header">header</p>
<p class="footer" slot="footer">footer</p>
</child>
</div>
<script type="text/javascript">
Vue.component('child',{
props:{
content:String,
},
template:` <div>
<slot name="header">
<h1>default 默认值</h1>
</slot>
<p>{{this.content}}</p>
<slot name="footer">3</slot>
</div>`
})
var vm = new Vue({
el:"#root",
})
</script>
</body>
</html>