vuejs рекурсивные компоненты одного файла

Question

Неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент?Для рекурсивных компонентов не забудьте указать опцию «name».

У меня есть боковая панель, содержащая TreeList, который содержит TreeNodes, каждый из которых содержит TreeList.

Я прочитал многоо других людях, имеющих проблемы с этим.Я пробовал такие решения, как указание имен вариантов шашлыка для компонентов.Я читал об этой проблеме с пространством имен, и я согласен, потому что у меня есть пример работы со всеми компонентами в одном файле.Когда компоненты находятся в отдельных файлах, вышеупомянутая ошибка возникает при перезагрузке моего скрипта с использованием vue CLI.Иногда и без объяснения причин при сохранении моего файла ошибка исчезает, и рекурсия работает снова.

Затем, когда она работает правильно, возникает ошибка при нажатии на дочерние узлы.

Не удается прочитатьсвойство 'length' не определено в simpleNormalizeChildren

Это как-то связано с vue CLI serve?Я открыт для объявления этих вещей в глобальном пространстве имен, за исключением того, что я не уверен, как это будет работать точно.

import TreeList from './TreeList.vue'

export default {
    name: 'tree-node',
    components: {
        'tree-list': TreeList
    },

...

import TreeNode from './TreeNode.vue'

export default {
    name: 'tree-list',
    components: {
        'tree-node': TreeNode
    }

...

import TreeList from './TreeList.vue'
import TreeNode from './TreeNode.vue'

export default {
    name: 'Sidebar',
    components: {
        TreeList,
        TreeNode
    }

Answer 1

Это, вероятно, происходит из-за круговой ссылки между вашими TreeList и TreeNode компонентами.

Когда вы внимательно посмотрите, вы увидите, что этикомпоненты фактически будут потомками и предками друг друга в дереве рендеринга - парадокс!

Чтобы разрешить этот парадокс, вы можете либо зарегистрировать свои компоненты глобально, используя Vue.component, либо вы можете отложить импорт одного из них.ваших компонентов на более позднюю точку (путем перемещения импорта на хук beforeCreate или с помощью асинхронных компонентов , как показано здесь ) ..

TreeList.vue

export default {
    name: 'tree-list',
    components: {
        'tree-node': () => import('./TreeNode.vue')
    }
    ...
}