动态组件呈现功能组件

Question

我正在尝试使用动态组件来呈现常规组件和无状态（功能性）组件。问题在于有状态组件可以正确呈现，但无状态组件为空白。两者

我将组件导入另一个文件，在该文件中，我的Vue实例被初始化：

import ComponentStateless from "./ComponentStateless.vue";
import ComponentStateful from "./ComponentStateful.vue";

Vue.component('component-stateful', ComponentStateful);
Vue.component('component-stateless', ComponentStateless);

new Vue({...});

动态组件如下所示：

<template>
  <div>
    <component :is="this.stateless"></component>
    <component :is="this.stateful"></component>
  </div>
</template>

<script>
  export default {
    name: "MainComponent",
    data() {
      return {
        stateful: "component-stateful",
        stateless: "component-stateless"
      };
    }
  }
</script>

功能组件是SFC单文件组件，看起来像：

<template functional>
  <p>Stateless</p>
</template>

<script>
  export default {
    functional: true,
    name: "ComponentStateless"
  }
</script>

常规有状态组件是SFC单文件组件，看起来像：

<template>
  <p>Stateful</p>
</template>

<script>
  export default {
    name: "ComponentStateful"
  }
</script>