Vue 之 vue-cli中render函数的使用

vue官网中有这样一个生动形象的例子，即如果我们想在传入不同的值时，渲染h1~h6不同的标签，如果我们在封装好的组件中根据传入的level值，进行v-if/v-else/v-else-if这种方式的话，代码十分冗长，如果里面还要传入内容，在插入锚点元素时会多次重复，因为有了render函数这种使用的方式。
Vue官网中给出的方式，是使用Vue.component形式来注册这个组件，在此处我就不过与赘述啦，主要想分享render函数方法给大家。

eg:组件FlexiableSlot.js
export default {
    render: function (createElement) {
      return createElement(
        'h' + this.level,   // 标签名称
        this.$slots.default, // 子节点数组
      )
    },
    props: {
      level: {
        type: Number,
        required: true,
      },
      content:{
        type:String,
        required:true,
      }
    }
}

eg:使用该组件
<template>
  <div class="selfComponent">
    <br/>
    <FlexiableSlot :level="1">
      【一级标题】level值为1，表示渲染的是h1标签
    </FlexiableSlot>
    <FlexiableSlot :level="2">
      【二级标题】level值为2，表示渲染的是h2标签
    </FlexiableSlot>
  </div>
</template>
<script>
  import FlexiableSlot from '../components/FlexiableSlot.js'

  export default {
    components: {
      FlexiableSlot,
    }
  }
</script>

通过以上这种方式，最终实现的效果

以上就是我今天学习到的方法，欢迎补充~