Rekursion in einzelnen Dateikomponenten in Vue.js 3

Question

Wie verwende ich rekursive Komponenten in Vue3?

Die Verwendung rekursiver Komponenten wie normale Komponenten in Vue 3 führt zu Fehlern 初始化前无法访问

Tree.vue:

<template>
  <Tree v-if="hasChildren" />
</template>

<script lang="ts">
import Tree from './Tree.vue';

export default defineComponent({
  components: {
    Tree
  },

  setup() {

    const hasChildren = someExitRecursionCondition();

    return {
      hasChildren
    }
  }
</script>

Answer 1

您可以仅提供组件名称选项：

Answer 2

文档：

组件可以通过其文件名导入，但无需在 components 设置对象中列出。不过，在模板中使用命名组件就足够了，无需导入它。

Tree.vue：