vuejs递归单文件组件

Question

未知自定义元素：-您注册了组件吗正确地对于递归组件，请确保提供"名称"选项

我有一个边栏，它包含一个TreeList，其中包含每个TreeNode都包含一个树列表。

我读过很多关于其他人对此有问题的文章。我尝试过一些解决方案，比如为组件指定烤肉串大小写名称。我已经读到这是命名空间的一个问题，我同意这一点，因为我有一个在单个文件中处理所有组件的示例。当组件位于单独的文件中时，使用vue CLI重新加载脚本时会出现上述错误。保存我的文件时，偶尔会出现错误，而且没有解释，递归会再次工作。

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

无法读取未定义的属性"length"在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

这可能是因为TreeList和TreeNode组件之间存在循环引用。。

当你仔细观察时，你会发现这些组件实际上是渲染树中彼此的后代和祖先-a矛盾的人

要解决这个矛盾，您可以使用Vue.component全局注册组件，也可以将其中一个组件的导入推迟到稍后的某个点(通过将导入移动到beforeCreate挂钩或使用此处演示的异步组件(。。

TreeList.vue

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

Answer 2

使用Vue 3，您可以使用异步组件：

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

文件：

• https://v3-migration.vuejs.org/breaking-changes/async-components.html#_3-x语法
• https://v3.vuejs.org/guide/component-dynamic-async.html#async-组件