Vue 中的jsx写法探究

平时我们习惯了写模板的方式来写vue组件，但是有时候这样会很浪费代码量，于是我们可以改用jsx写法，例如

我们要封装这样一个组件，最原始的方式我们是不是要写很多个v-if来进行判断,但是这不是我们想要的

 <h :level="1">这是h1</h>
 <h :level="2">这是h2</h>

jsx里面的正文是

export default {
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  render(createElement) {
    let t = 'h' + this.level
    return <t>{this.$slots.default}</t>
  }
}

这样我们就可以很方便的进行组件封装了！