Vue：2个组件递归调用彼此的问题

Question

问题描述

我正在编写一个Vue应用程序，其中有2个组件（HierarchyNodesList和HierarchyNode）以递归方式相互调用。或多或少的组件树如下所示：

• HierarchyNodesList
  • HierarchyNode
    • HierarchyNodesList
      • HierarchyNode
      • HierarchyNode
      • HierarchyNode
  • HierarchyNode
    • HierarchyNodesList
      • HierarchyNode
      • HierarchyNode

出于某种原因，我在使它工作时遇到了问题。组件只能渲染到第二级（根HierarchyNodesList和HierarchyNode-直接嵌套在其中）。

在开发人员工具的HTML树中，第三个级别HierarchyNodeList如下所示。似乎无法在Vue模板中对其进行解析，而只是不对浏览器进行解析。

<hierarchynodeslist data-v-26be5b52="" nodes="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></hierarchynodeslist>

在控制台中出现这些错误：

[Vue warn]: Unknown custom element: <HierarchyNodesList> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HierarchyNode> at src/components/HierarchyNode.vue
       <HierarchyNodesList> at src/components/HierarchyNodesList.vue
         <Home> at src/views/Home.vue
           <MainLayout> at src/layouts/MainLayout.vue
             <App> at src/App.vue
               <Root>

我互相注册了这两个组件，并为两者提供了name属性（以下代码摘录）。

问题

这些问题的原因是什么？解决该问题的方法是什么？

代码

HierarchyNodesList.vue

import HierarchyNode from '@/components/HierarchyNode.vue';

export default {

  name: 'HierarchyNodesList',

  components: {
    HierarchyNode,
  },

  (...)

}

HierarchyNode.vue

import HierarchyNodesList from '@/components/HierarchyNodesList.vue';

export default {

  name: 'HierarchyNode',

  components: {
    HierarchyNodesList,
  },

  (...)

}

Answer 1

官方文档中有关于此类问题的部分：

https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

一种解决方法是全局注册。

另一种方法是在beforeCreate钩子中注册组件：

beforeCreate () {
  this.$options.components.HierarchyNodesList = require('./HierarchyNodesList.vue').default
}

第三个是异步导入：

components: {
  HierarchyNodesList: () => import('./HierarchyNodesList.vue')
}