vue渲染函数

基础：创建anchored-heading.vue文件

<script>
export default {
  props: {
    level: {
      type: [Number, String],
      require: true,
      default: 1,
    },
  },
  render: function(h) {
    return h(
      'h' + this.level, // 标签名称
      this.$slots.default, // 子节点数组 dom数组
    )
  },
}
</script>

使用

<anchored-heading level="2">
    <span>span标签</span>
    &nbsp; &nbsp; &nbsp;
    <i>i标签</i>
</anchored-heading>
<anchored-heading level="3">标题3333</anchored-heading>

向子组件传递不带 v-slot 指令的子节点时，这些子节点被存储在组件实例中的$slots.default 中。
例如上例中：子节点分别是：

控制台输出：this.$slots.default

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

一个渲染函数里，createElement 返回的到底是什么，它更准确的名字可能是createNodeDescription ，它不是一个实际的DOM元素，它会把所包含的信息告诉Vue页面上要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点（virtual node）”，简写为“VNode”。

createElement参数：

// @return {VNode}
createElement(
  // {String | Object | Function}
  // 一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
  'div',
  // {Object}
  // 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
  {
  },
  // {String | Array}
  // 子节点（VNodes）由 createElement() 构建而成。可选参数
  // 或简单的使用字符串来生成的 "文本节点"。
  [
    'xxxx',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'xxx'
      }
    })
  ]
)

参数一：String | Object | Function，一个HTML标签名 或 组件选项对象 或 resolve了上述任何一种一个async函数。必选项

参数二：Object ，一个与模板中attribute对应的数据对象，可选。

参数三：String | Array，子级虚拟节点（VNodes），由 createElement() 构建而成，也可以使用字符串来生成“本文虚拟节点”，可选。