vuejs 递归单文件组件

Posted 2023-02-23

【中文标题】vuejs 递归单文件组件

【英文标题】：vuejs recursive single file components

【发布时间】：2019-05-13 19:57:59

【问题描述】：

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

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

【参考方案1】：

这可能是因为您的TreeList 和TreeNode 组件之间的circular referencing ..

当您仔细观察时，您会发现这些组件实际上 在渲染树中成为彼此的后代和祖先 - a 悖论！

要解决这个悖论，您可以使用 Vue.component 全局注册您的组件，或者您可以推迟导入其中一个组件（通过将导入移动到 beforeCreate 挂钩或使用 async components如图所示here) ..

TreeList.vue

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

【讨论】：

成功。我现在正在使用 before create hook beforeCreate: function () this.$options.components.TreeList = require('./TreeList.vue').default ,

即使在全局范围内声明该组件，我也无法制作出疯狂的递归树，但这成功了！

【参考方案2】：

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

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

文档：

https://v3.vuejs.org/guide/migration/async-components.html#_3-x-syntax https://v3.vuejs.org/guide/component-dynamic-async.html#async-components