单个文件组件中的递归 Vue.js 3

【问题标题】：Recursion in Single File Components Vue.js 3单个文件组件中的递归 Vue.js 3
【发布时间】：2022-08-03 17:10:05
【问题描述】：

Vue3中如何使用递归组件？

在 Vue 3 中像普通组件一样使用递归组件会导致错误 Cannot access before initialization

树.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>

标签： vue.js vuejs3

【解决方案1】：

Documentation:

SFC 可以通过其文件名隐式引用自身。

通过文件名导入组件就足够了，但没有在components 设置对象中列出。

树.vue：
<template>
  <Tree v-if="hasChildren" />
</template>

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

export default defineComponent({
  setup() {

    const hasChildren = someExitRecursionCondition();

    return {
      hasChildren
    }
  }
</script>

【讨论】：