1、render函数、createElement函数
Vue.component('es-header', { render: function (createElement) { return createElement({ 'div', '我是header' }) }, props: {} }) // 等同于
Vue.component('es-header', { template: '<div>我是dom元素</div>', props: {} })
createElement 函数的作用就是生成一个 VNode节点（虚拟dom），
render 函数得到createElement() 创建的 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
就是这么简单 别想多了。
2、vm.$slots
vm.$slots是一个对象，键名是所有具名slot的名称，加上一个default，而键值则是一个存放VNode节点的数组。
官方文档：用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性（例如：slot="foo" 中的内容将会在 vm.$slots.foo 中被找到），default 属性则包括了所有没有被包含在具名 slot 中的节点。
实例：
<blog-post>
<h1 slot="header">我属于header</h1>
<h1 slot="header">我也属于header</h1>
<p>我谁都不属于</p>
<p slot="footer">我属于footer</p>
<p>谁来认领我</p>
</blog-post>
我们看下这个blog-post的示例：在blog-post标签里，元素被我们这样设置：属于header的slot有2个h1；属于footer的slot的有1个<p>，属于不具名slot（会归到default里）的有2个<p>及4个空的VNode节点
如果像下面这样，指定了render函数的话，就可以手动创建出html标签。
Vue.component('blog-post', { render: function (createElement) { 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) ]) } })
createElement(html标签名，VNode节点数组) 会编译出一个指定的html标签，然后把VNode节点数组里非空的节点编译回原来的html内容。其结果就相当于把原来的那些<blog-post>标签之间的内容根据它们的slot属性，放进了指定的标签里。