Vue2项目中使用render

\src\views\about.vue

<template>
  <div>
    <h2>render函数</h2>
    <heading :title="title" :level="level">
      {{ title }}
    </heading>
  </div>
</template>

<script>
import Heading from "./son/Sonslot.vue";
export default {
  components: { Heading },
  data() {
    return {
      title: "这是由render函数渲染的标签。",
      level: "2",
    };
  },
};
</script>

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

\src\views\son\sonslot.vue

<script>
export default {
  props: ["level", "title"],
  // heading组件
  // <heading :level="1" :title="title" icon="cart">{{title}}</heading>
  // <h2 title=""></h2>
  render(h) {
    console.log("this.$slots.default :>> ", this.$slots.default);
    return h(
      "h" + this.level, // 参数1，tagname  //标签h1   
      { attrs: { title: this.title } }, // 参数2：{。。。}
      //this.$slots.default 为默认插槽
      //也可以定义具名插槽 this.$slots.名称 | 使用 v-slot:名称 插入
      this.$slots.default // 参数3，子节点VNode数组
        // 'h1',{style:{'background-color':'black',width:"100px",height:'100px'}}
    );
  },
};
</script>

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

示例：

效果：