Как исправить ошибку при импорте родительского компонента в дочерний Vue.js?

Question

[Sodmev]

Доброго времени!

Суть проблемы вот в чем:

Из-за чего может возникать ошибка Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. при импорте родительского компомента <temp-component> в дочерний при следующей иерархии:

<temp-component>
      <rowComponent>
            <colComponent>
                   и тут импортируется <temp-component></temp-component>
            </colComponent>
      </rowComponent>
</temp-component>

Убираю импорт <temp-component> в дочернем элементе, все работает.

Comments

[Артур Карапетян]

Как импортируете компонент?

[Sodmev]

import tempComponent from './tempComponent';
export default {
  name: 'colComponent',
  components: {
  tempComponent
  }
}

Answer 1

[Василий]

У компонентов должно быть указано свойство name, в components дочернго компанента имя родительского компанента должно быть такое же, как name.

Comments

[Sodmev]

у каждого компонента указан name ('temp-component', 'rowComponent', 'colComponent'). Если я правильно понял, то у каждого дочернего компонента должен указать name родительского? Если можно пример приведите пожалуйста

[Василий]

Наименование компонентов согласно спецификации vue name casing

TempComponent.vue

<template>
  <div>
    temp-component
    <hr />
    <RowComponent :rows="3" />
  </div>
</template>

<script>
import RowComponent from "./RowComponent";

export default {
  name: "temp-component",
  components: {
    RowComponent
  }
};
</script>

RowComponent.vue

<template>
  <div>
    Row
    <col-component :rows="rows - 1" />
  </div>
</template>

<script>
import ColComponent from "./ColComponent";

export default {
  name: "RowComponent",
  props: {
    rows: {
      required: true,
      type: Number
    }
  },
  components: {
    ColComponent
  }
};
</script>

ColComponent.vue

<template>
  <div>
    Col, next rows count: {{ rows }}
    <template v-if="rows > 0">
      <hr />
      <row-component :rows="rows" />
    </template>
  </div>
</template>

<script>
import RowComponent from "./RowComponent";

export default {
  name: "ColComponent",
  props: {
    rows: {
      required: true,
      type: Number
    }
  },
  components: {
    RowComponent
  }
};
</script>

Результат

temp-component
------------------------------
Row
Col, next rows count: 2
------------------------------
Row
Col, next rows count: 1
Row
------------------------------
Col, next rows count: 0

Answer 2

[Dmitry Barkowski]

Возможно неверно был указан используемый компонент, либо не был указан вообще.

import TempComponent from './temp-component.vue'
export default {
  name: 'root-component-name',
  components: {
  TempComponent
  }
  etc...
}