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

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

但还是不行。如何解决这个问题？

原文由 user7693832 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

 name: 'Tabpane'

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

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您在组件中使用组件（例如 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，在我的实例中，我必须在父组件和子组件中都使用此方法来阻止此问题的出现。

原文由 fredrivett 发布，翻译遵循 CC BY-SA 4.0 许可协议