How to use render() with vue-class-component?

[waylau]

I want use render() in vue-class-component way , I follow this Render Functions guide (https://v3.vuejs.org/guide/render-function.html), but it doesn't work.

My code AnchoredHeading.vue is here:

<template>
  <div></div>

</template>

<script lang="ts">
import { VNode } from "vue";
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
})
export default class AnchoredHeading extends Vue {
  level!: Number;

  render():VNode {
    const { h }: any = Vue;
    const slots: any = this.$slots;
    return h(
      "h" + this.level, // tag name
      {}, // props/attributes
      slots.default() // array of children
    );
  }

}
</script>

and import AnchoredHeading in App.vue like:

<template>
  <AnchoredHeading :level="1">Hello world!</AnchoredHeading>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import AnchoredHeading from "./components/AnchoredHeading.vue";
@Options({
  components: {
    AnchoredHeading,
  },
})
export default class App extends Vue {}
</script>

[waylau]

My answer to my question is change AnchoredHeading.vue into pure Typescript class AnchoredHeading.ts ,and it works.

Here is my code:

import { Options, Vue } from "vue-class-component";
import { h } from "vue";

@Options({
  render() {
    return h(
      'h' + this.level, // 标签名称
      {}, // prop/attribute
      this.$slots.default()
    )
  },
  props: {
    level: Number
  }
})
export default class AnchoredHeading extends Vue {
  level!: Number;
}