Вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр "имя"

Я настроил 'i-tab-pane': Tabpane но сообщаю об ошибке ， код ниже:

<template>
  <div class="page-common">
    <i-tabs>
      <i-tab-pane label="wx">
        content
      </i-tab-pane>
    </i-tabs>
  </div>
</template>

<script>

  import {
    Tabs,
    Tabpane
  } from 'iview'

  export default{
    name:"data-center",
    data(){
      return {msg: 'hello vue'}
    },
    components: {
      'i-tabs' : Tabs,
      'i-tab-pane': Tabpane
    }
  }
</script>

Отслеживание ошибок ：

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

found in

---> <DataCenter> at src/views/dc/data-center.vue
       <Index> at src/views/index.vue
         <App> at src/app.vue

Я попытался в main.js для глобальной конфигурации:

Vue.component("Tabpane", Tabpane);

но все равно не работают. Как решить эту проблему?

Ответы

Ответ 1

Поскольку вы использовали другое имя для компонентов:

components: {
      'i-tabs' : Tabs,
      'i-tab-pane': Tabpane
    }

Вам также нужно иметь одно и то же имя при экспорте: (Проверить имя в компоненте Tabpane)

name: 'Tabpane'

Из ошибки я могу сказать, что вы не определили name в своем компоненте Tabpane. Обязательно проверьте name, и он должен работать нормально, без ошибок.

Ответ 2

Для рекурсивных компонентов, которые не зарегистрированы глобально, важно использовать не "любое имя", а ТОЧНО такое же имя, как у вашего компонента.

Позвольте мне привести пример:

<template>
    <li>{{tag.name}}
        <ul v-if="tag.sub_tags && tag.sub_tags.length">
            <app-tag v-for="subTag in tag.sub_tags" v-bind:tag="subTag" v-bind:key="subTag.name"></app-tag>
        </ul>
    </li>
</template>

<script>
    export default {
        name: "app-tag",  // using EXACTLY this name is essential

        components: {

        },

        props: ['tag'],
    }

Ответ 3

У меня тоже была эта ошибка. Я трижды проверил, что имена были правильными.

Однако я получил эту ошибку просто потому, что не завершал тег script.

<template>
  <div>
    <p>My Form</p>
    <PageA></PageA>        
  </div>
</template>

<script>
import PageA from "./PageA.vue"

export default {
  name: "MyForm",
  components: {
    PageA
  }
}

Обратите внимание, что в конце нет </script>.

Так что не забудьте проверить это дважды.

Ответ 4

Одна из ошибок - установка components виде массива, а не объекта!

Это не верно:

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: [
    ChildComponent
  ],
  props: {
    ...
  }
};
</script>

Это правильно:

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  props: {
    ...
  }
};
</script>