<body>
<div id="app">
<Hello>
<div> 这是组件内直接写的 </div>
</Hello>
</div>
<template id="hello">
<div>
<h3> 骏哥, 被伤了 </h3>
<slot></slot>
</div>
</template>
</body>
<script>
/*
slot
可以代替组件内直接写的内容
*/
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
具名插槽
<body>
<div id="app">
<Hello>
<header slot = 'header'>头部</header>
<section slot = "content"> 内容 </section>
<footer slot = "footer"> 底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = 'header'></slot>
<h3> 骏哥, 被伤了 </h3>
<slot name = "content"></slot>
<slot name = "footer"></slot>
</div>
</template>
</body>
<script>
/*
slot
可以代替组件内直接写的内容
*/
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>