首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >vuejs递归单文件组件

vuejs递归单文件组件
EN

Stack Overflow用户
提问于 2018-12-12 16:46:30
回答 2查看 2.7K关注 0票数 6

未知自定义元素:-正确注册组件吗?对于递归组件,请确保提供"name“选项。

我有一个边栏,其中包含一个TreeList,其中包含一个TreeNodes,每个边条都包含一个TreeList。

我读过很多关于其他人在这方面有问题的文章。我已经尝试过解决方案,比如为组件指定kebab大小写名。我读过关于命名空间存在问题的文章,我同意这一点,因为我有一个处理单个文件中所有组件的示例。当组件位于单独的文件中时,当使用vue CLI重新加载我的脚本时,会发生上述错误。有时,在保存我的文件时,没有任何解释,错误就会消失,递归也会再次工作。

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

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

这与vue CLI服务有关吗?我愿意在全局命名空间中声明这些内容,但我不确定这到底是如何工作的。

代码语言:javascript
运行
复制
import TreeList from './TreeList.vue'

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

..。

代码语言:javascript
运行
复制
import TreeNode from './TreeNode.vue'

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

..。

代码语言:javascript
运行
复制
import TreeList from './TreeList.vue'
import TreeNode from './TreeNode.vue'

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

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-12 16:58:15

这可能是因为您的循环参考在您的TreeListTreeNode组件之间。

当您仔细观察时,您会发现这些组件实际上是呈现树中彼此的后代和祖先--一个悖论!

要解决这一矛盾,可以使用Vue.component全局注册组件,也可以将组件的导入推迟到稍后点(通过将导入转移到beforeCreate钩子或使用演示的这里)。

TreeList.vue

代码语言:javascript
运行
复制
export default {
    name: 'tree-list',
    components: {
        'tree-node': () => import('./TreeNode.vue')
    }
    ...
}
票数 12
EN

Stack Overflow用户

发布于 2021-09-27 15:33:13

使用Vue 3,您可以使用异步组件:

代码语言:javascript
运行
复制
export default {
  name: 'tree-list',
  components: {
    'tree-node': defineAsyncComponent(() => import('./TreeNode.vue'))
  }
}

文档:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53747661

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档