时间戳

首页 > 解决方案 > vuejs 递归单文件组件

vue.js - vuejs 递归单文件组件

问题描述

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

我有一个侧边栏，其中包含一个包含 TreeNodes 的 TreeList，每个 TreeNodes 都包含一个 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
    }

标签： vue.jsvuejs2

解决方案

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

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

要解决这个悖论，您可以使用全局注册组件Vue.component，也可以将其中一个组件的导入推迟到以后（通过将导入移动到beforeCreate钩子或使用此处演示的异步组件）..

TreeList.vue

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

推荐阅读