Vue.js 您是否正确注册了该组件？对于递归组件，请确保提供；名称“；选项

我配置了

'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>

但仍然不起作用。

---

如何解决这个问题

因为您为组件应用了不同的名称：

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

导出时还需要具有相同的名称：（选中Tabpane组件中的名称）

---

从错误中，我可以说您没有在组件

Tabpane

中定义

name

。确保验证

名称

，它应该可以正常工作，没有错误。

对于未全局注册的递归组件，必须使用与组件完全相同的名称，而不是“任何名称”

让我举一个例子：

<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'],
    }

{{tag.name}



导出默认值{
名称：“app tag”//完全使用此名称是必要的
组成部分：{
},
道具：['tag']，
}

---

我也有这个错误。我三次检查姓名是否正确

但是，我得到这个错误仅仅是因为我没有终止脚本标记

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

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

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

我的表格

从“/PageA.vue”导入PageA
导出默认值{
姓名：“我的表格”，
组成部分：{
佩加
}
}

请注意，结尾没有

---

所以一定要仔细检查。

其中一个错误是将组件设置为数组而不是对象

这是错误的：

<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>

从“/ChildComponent.vue”导入ChildComponent；
导出默认值{
名称：“ParentComponent”，
组成部分：[
子组件
],
道具：{
...
}
};

这是正确的：

<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>

从“/ChildComponent.vue”导入ChildComponent；
导出默认值{
名称：“ParentComponent”，
组成部分：{
子组件
},
道具：{
...
}
};

---

注意：对于使用其他（“子”）组件的组件，您还必须指定一个

components

字段

浪费了将近一个小时，没有找到解决方案，所以我想贡献=）

就我而言，我错误地导入了组件。。如下图所示：

import { MyComponent } from './components/MyComponent'

但正确的答案是（不带花括号）：

---

确保注意以下事项：

您的import语句及其路径

在组件{..}块中指定的组件的标记名

---

我犯了这个错误，发现问题是因为组件的名称与道具的名称相同

import Control from '@/Control.vue';
export default {
    name: 'Question',
    components: {
        Control
    },
    props: ['Control', 'source'],

---

我使用的是文件组件。我将Control.vue更改为InputControl.vue，此警告消失。

对于那些正在寻找答案而其他答案不起作用的人，这可能：

如果您正在组件中使用组件（例如，在Vue DOM中使用类似的组件）：

这里的问题是，

MyComponent

既是它自己的父级，也是它自己的子级。这会使Vue进入一个循环，每个组件都依赖于其他组件

有几种解决方案：

 1. 全局注册MyComponent

vue.component（“MyComponent”，MyComponent）

2.在创建之前使用

3.将
导入
移动到
组件
对象内的lambda函数中
我的偏好是第三个选项，这是最简单的调整，解决了我的问题


更多信息：

注意：如果选择方法的2或3，在我的实例中，我必须在父组件和子组件中使用此方法来阻止出现此问题。
添加我的方案。以防有人有类似的问题，无法确定实际问题

我在用

以前它只需要“拆分窗格”，在最新版本中，他们制作了另一个“窗格”组件（作为拆分窗格的子组件）

现在的问题是，若你们并没有在最新版本的splitpanes中注册“Pane”组件，它会显示“splitpanes”的错误。如下

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

[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项。
得票率高的答案是正确的。您可以检查是否为组件应用了不同的名称。但是如果问题仍然没有解决，您可以确保只注册了一次组件


组件：{
IMContainer，
右面板
},
方法：{}，
组成部分：{
IMContainer，
右面板
}
在我的例子中，这是在
index.js中导入的顺序

/* /components/index.js */
import List from './list.vue';
import ListItem from './list-item.vue';

export {List, ListItem}

如果您在
列表
组件中使用
列表项
组件，它将显示此错误，因为它没有正确导入。确保按顺序首先导入所有依赖项组件。
这是错误的：

import {
    Tabs,
    Tabpane
  } from 'iview'

这是正确的：

import Iview from "iview";
const { Tabs, Tabpane} = Iview;

这是我们在启动任何Vue项目时遇到的常见错误。我花了很多时间搜索这个错误，最终找到了解决方案。
假设我的组件是“table.vue”

i、 e组件/table.vue

在app.js中

Vue.component('mytablecomp', require('./components/table.vue').default);

因此，在index.blade文件中，将组件调用为

<mytablecomp></mytablecomp>



您只需要记住，您的组件名称是小写的，而不是大写或驼峰式的。
那么我上面的代码一定会对你有用

感谢对我的测试（quasar和命令
quasar dev
），我只是忘了重新启动dev-quasar命令

在我看来，任何更改完成后，组件都会自动加载。但在本例中，我在另一个页面中重用了该组件，并收到了这条消息。
我遇到了这个问题，下面是一个不同的解决方案。我正在将我的组件导出为

export default {
    MyComponent1,
    MyComponent2
}

我是这样输入的：

import { MyComponent1, MyComponent2} from '@/index'

export default {
  name: 'App',
  components: {
    MyComponent1,
    MyComponent2
  },
};

它给出了这个错误

解决办法是：
只需使用
export{…}
不要使用
exp
import Iview from "iview";
const { Tabs, Tabpane} = Iview;

Vue.component('mytablecomp', require('./components/table.vue').default);

<mytablecomp></mytablecomp>

export default {
    MyComponent1,
    MyComponent2
}

import { MyComponent1, MyComponent2} from '@/index'

export default {
  name: 'App',
  components: {
    MyComponent1,
    MyComponent2
  },
};

    <template>
        <i18n path="AssetDict.Companies" tag="VText">
          <template>
            <span class="bold-500">Hi This is a text</span>
          </template>
        </i18n>
    </template>

    <script>

    import { VButton, VIcon, VTooltip, VText } from 'ui/atoms'
    
    export default {
      name: 'ComponentB',
      components: {
        VButton,
        VIcon,
        CompaniesModifyColumn,
        VTooltip,
        // eslint-disable-next-line vue/no-unused-components
        VText,
      },
}

</script>

import completeProfile from "@/components/modals/CompleteProfile";

export default {
  components: completeProfile
};

import completeProfile from "@/components/modals/CompleteProfile";

export default {
  components: {completeProfile} // You need to put the component in brackets
};