did you register the component correctly? For recursive components, make sure to provide the "name" option

Question

I configured 'i-tab-pane': Tabpane but report error，the code is bellow:

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

Error traceback：

[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 

---

I have tried in the main.js to global configuration：

Vue.component("Tabpane", Tabpane); 

but still do not work. How to resolve this issue?

Answer 1

If you're using a component within a component (e.g. something like this in the Vue DOM):

App   MyComponent    ADifferentComponent      MyComponent 

Here the issue is that MyComponent is both the parent and child of itself. This throws Vue into a loop, with each component depending on the other.

There's a few solutions to this:

 1. Globally register MyComponent

vue.component("MyComponent", MyComponent)

2. Using beforeCreate

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

3. Move the import into a lambda function within the components object

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

My preference is the third option, it's the simplest tweak and fixes the issue in my case.

---

More info: Vue.js Official Docs — Handling Edge Cases: Circular References Between Components

Note: if you choose method's 2 or 3, in my instance I had to use this method in both the parent and child components to stop this issue arising.