vue 的渲染函数

加入有这么一个需求，就是根据level 的属性值，动态的 展示h1-h6 你咋写

你也许会这样写：

Headings2.vue

<template>
  <div>
    <h1 v-if="this.level==='1'">
      <slot></slot>
    </h1>
    <h2 v-if="this.level==='2'">
      <slot></slot>
    </h2>
    <h3 v-if="this.level==='3'">
      <slot></slot>
    </h3>

    <!-- h4,h5,h6 略 -->
  </div>
</template>

<script>
export default {
  props: {
    level: {
      type: String,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

使用如下：

展示结果：

这都没有任何问题，可惜这样写太啰嗦了，这个时候，可以用渲染函数写法！

可以实现一模一样的功能！

行，渲染函数初步使用，就写到这里，大家有个印象就行了

h 函数，接受三个参数， 1 标签名， 2 属性，3， 子节点（vNode 数组）