Рекурсивный компонент с использованием Vue компонентов в стиле класса

Question

Я использую компонент стиля класса с плагином vue -property-decorator. Как я могу иметь рекурсивный компонент и использовать компонент сам по себе. мой код, как показано ниже:

<template>
<ul>
    <li>
        <div>
            {{nodeData.someData}}
        </div>
    </li>
    <li>
        <TreeNode
        v-for="item in nodeData.children"
        :key="item.id"
        ></TreeNode>
    </li>
</ul>
</template>

<script lang="ts">

import {Vue, Prop, Component, Watch} from 'vue-property-decorator';

@Component({
//error :'TreeNode' was used before it was defined.
   components:{TreeNode}
})
export default class TreeNode extends Vue {

   @Prop() nodeData?: myType;

}

</script>

использование TreeNode в компоненте опция вызывает ошибку: «TreeNode» был использован до того, как он был определен. как я могу это исправить? или какой альтернативный способ?

Answer 1

нет необходимости:

components:{TreeNode}

просто удалите его и все будет работать!