Vue: проблемы с рекурсивным вызовом 2 компонентов - PullRequest
Новая
       15

Vue: проблемы с рекурсивным вызовом 2 компонентов

1 голос
/ 08 июля 2019

Описание проблемы

Я пишу приложение Vue, где у меня есть 2 компонента (HierarchyNodesList и HierarchyNode), рекурсивно вызывающих друг друга. Более или менее дерево компонентов выглядит так:

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

Почему-то у меня проблемы с тем, чтобы это работало. Компоненты отображаются только до 2-го уровня (root HierarchyNodesList и HierarchyNode -s вложены непосредственно в него).

В дереве HTML в инструментах разработчика 3-й уровень 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,
  },

  (...)

}

1 Ответ

1 голос
/ 08 июля 2019

В официальной документации есть раздел об этой проблеме:

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')
}
...