插槽：组件中的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<blog-post>
<template v-slot:header> <!-- 使用v-slot命名插槽 -->
<h1>About Me</h1>
</template>
<p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p> <!-- 匿名插槽 -->
<template v-slot:footer> <!-- v-slot命名插槽 -->
<p>Copyright 2016 Evan You</p>
</template>
<!-- 匿名插槽 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 -->
<p>If I have some content down here, it will also be included in vm.$slots.default.</p>
</blog-post>
</div>
<script>
//全局注册组件
Vue.component('blog-post', {
// 使用reader函数进行html页面渲染
render: function (createElement) {
// 使用$slot获取插槽的节点 获得子虚拟结点
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})
var vm = new Vue({ el: '#app' })
</script>
</body>
</html>
渲染得到的html文档结构
