Vue组件插槽的使用

<div id="app">
<parent>
12323
</parent>
</div>

<script>
var par = {
template: `<div>hello <slot></slot></div>`
}

let vm = new Vue({
el: '#app',
components: {
parent: par
}
})
</script>

<div id="app">
<layout>
<template v-slot:header>
123
</template>
<template #main>
456
</template>
<template #footer>
789
</template>
</layout>
</div>

<script>
var layout = {
template: `
<div>hello
<header>
<slot name="header"></slot>
</header>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
}

let vm = new Vue({
el: '#app',
components: {
layout: layout
}
})
</script>