先新建一个renderDom.js的文件  下面是这个文件的内容

export default {
  render: function (createElement) {
    return createElement('h3', '我是H3标签')
  }
}

之后作为组件引入到vue单文件中

<template>
  <div>
    <render-fun/>
  </div>
</template>

<script>
import renderFun from './render.js'
export default {
  components: {
    'render-fun': renderFun
  }
}
</script>

上面是基础用法

如果需要传参 和组件传参一样 在render.js中用props

render函数作用是创造一个虚拟的dom节点 （实质就是生成template模板）

之后通过js挂在到body中 和react类似直接用js生成dom节点

下面 介绍下更多属性的写法

export default {

  render: function (createElement) {
    return createElement(
      'h3',
      {
        //    DOM 属性（这里选择innerHtml进行赋值）
        domProps: {
          innerHTML: '我是H3标签'
        },
        // 添加class（接受一个字符串、对象或字符串和对象组成的数组）
        'class': {
          'testClass': true
        },
        // 添加行内样式（接受一个字符串、对象，或对象组成的数组）
        style: {
          color: 'red'
        },
        // 添加id
        attrs: {
          id: 'foo'
        },
        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。
        on: {
          click: this.clickHandler
        }
      }
    )
  },
  methods: {
    clickHandler () {
      alert('on被弹出')
    }
  }
}