<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<body-content>
<div class='header' slot='header'>header</div><!--slot='header'命名插槽-->
<div class='footer' slot='footer'>footer</div>
</body-content>
</div>
</body>
<script>
Vue.component('body-content',{
template:`<div>
<slot name='header'>
<h1>default header</h1>
</slot>
<div class='content'>content</div>
<slot name='footer'></slot>
</div>`//name来获取命名的内容进行输出,中间的内容可以默认，当没有命名的时候输出默认
})
var vm=new Vue({
el:'#app'
})
</script>
</html>
