vuejs递归单文件组件

Question

未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我有一个侧边栏，其中包含一个包含 TreeNode 的 TreeList，每个 TreeNode 都包含一个 TreeList。

我已经阅读了很多关于其他人在这方面遇到问题的信息。我尝试过一些解决方案，例如为组件指定烤肉串外壳名称。我已经读到这是命名空间的问题，我同意，因为我有一个使用单个文件中的所有组件的示例。当组件位于单独的文件中时，使用 vue CLI 重新加载我的脚本时会发生上述错误。在保存我的文件时，有时并且没有解释，错误消失并且递归再次起作用。

然后当它正常工作时，单击子节点时会出现错误。

无法读取 simpleNormalizeChildren 处未定义的属性“长度”

与 vue CLI 服务有关吗？我愿意在全局命名空间中声明这些东西，除非我不确定这将如何工作。

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

这可能是由于您和组件之间的循环引用而发生的。TreeListTreeNode

当您仔细观察时，您会发现这些组件实际上是渲染树中彼此的后代和祖先——这是一个悖论！

要解决这个矛盾，你可以你的组件使用全球任何注册Vue.component，也可以推迟你的组件到更高点之一的进口（由进口移动到beforeCreate钩或使用异步组件作为证明这里）..

TreeList.vue

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