How to use recursive components in Vue3?
Using recursive components like normal components in Vue 3 will result in errors Cannot be accessed 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>
You can provide only the component name option:
document:
Components can be imported by their filename, but do not need to be listed in the
components
settings object. However, it is enough to use the named component in the template without importing it.Tree.vue: