你是否正确注册了该组件？对于递归组件,请确保提供"名称"选项

Question

我配置'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);

但仍然无法正常工作.如何解决这个问题？

Answer 1

对于那些正在寻找答案而其他人没有工作的人，这可能：

如果你在一个组件中使用一个组件（例如在 Vue DOM 中这样的东西）：

App
  MyComponent
   ADifferentComponent
     MyComponent

这里的问题是它MyComponent本身既是父母又是孩子。这会将 Vue 放入一个循环中，每个组件都依赖于另一个。

有几个解决方案：

 1.全球注册 MyComponent

vue.component("MyComponent", MyComponent)

2. 使用 beforeCreate

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

3. 将 移动import到components对象内的 lambda 函数中

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

我的偏好是第三个选项，这是最简单的调整并解决了我的问题。

更多信息：Vue.js 官方文档 — 处理边缘情况：组件之间的循环引用

注意：如果您选择方法的 2 或 3，在我的实例中，我必须在父组件和子组件中使用此方法来阻止出现此问题。

Answer 2

浪费了将近一个小时，没有找到解决办法，所以想贡献一下=）

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

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

但正确的是（没有花括号）：

import MyComponent from './components/MyComponent'

Answer 3

由于您为组件应用了不同的名称:

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

导出时还需要具有相同的名称:(检查Tabpane组件中的名称)

name: 'Tabpane'

从错误中,我可以说你没有name在你的组件中定义Tabpane.确保验证它name,它应该正常工作,没有错误.

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

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

Answer 5

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

让我举个例子：

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

Answer 6

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

但是，我收到此错误只是因为我没有终止脚本标记。

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

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

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

请注意，末尾没有</script> 。

所以一定要仔细检查这一点。