vuejs 递归单文件组件答案

【问题标题】：vuejs recursive single file componentsvuejs 递归单文件组件
【发布时间】：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
    }

【问题讨论】：

标签： vue.js vuejs2

【解决方案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'))
  }
}

文档：

【讨论】：