vue.js componentsの宣言時 importしたコンポネントではなく関数でdivを返したい

Question

しょぼい質問で申し訳ないです。
componentsの宣言時 importしたコンポネントではなく関数で<h1>xx</h1>をそのまま返す
ことは可能でしょうか。

コードは動いてないですが、こんなことをしたいです

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import Header from "@/components/Organisms/Header.vue";

@Component({
  components: {
    Header,
    Top: function() {
      return <h1>xx</h1>;
    },
export default class xx extends Vue {
}
</script>

Answer 1

関数そのものをコンポーネントとして登録することはできませんが、renderもしくはtemplateを持つオブジェクトなら登録することができます。

import { Component, Vue, Prop } from "vue-property-decorator";
import Header from "@/components/Organisms/Header.vue";

@Component({
  components: {
    Header,
    Top: {
      render(h) {
        return <h1>xx</h1>
      }
    }
  }
})
export default class xx extends Vue {
}

Comments

[Kimsehwa]

大変ヒントになりました。ありがとうございます。

自分の場合<h1>xx</h1>は直接返せなかったので
以下のように返しました。

```
return h("h1", "xx");
```

JSX的な書き方で動くものでしょうか。

[yhg]

JSXを使いたい場合はBabelの設定が必要です。
加えてTypeScriptの場合はtsconfig.jsonでjsxオプションをpreserveにする必要があります。

https://github.com/vuejs/jsx