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

Question

如何在Vue3中使用递归组件？

在Vue 3中使用递归组件类法线组件会导致错误Cannot access before initialization

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

文档

证监会可以通过其文件名含蓄地称呼自己。

组件可以通过其文件名导入，但不需要在components安装对象中列出。但是，只需在模板中使用命名组件而不导入它就足够了。

Tree.vue：

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

<script lang="ts">
export default defineComponent({
  setup() {

    const hasChildren = someExitRecursionCondition();

    return {
      hasChildren
    }
  }
</script>

Answer 2

您只能提供组件名称选项：

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

<script lang="ts">
export default defineComponent({
  name:'Tree',
  setup() {

    const hasChildren = someExitRecursionCondition();

    return {
      hasChildren
    }
  }
</script>