avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom"

Question

J'ai configuré 'i-tab-pane': Tabpane mais je signale une erreur ， le code est ci-dessous:

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

Trace d'erreur:

 [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
 

---

J'ai essayé la configuration globale main.js :

 Vue.component("Tabpane", Tabpane);
 

mais ne fonctionnent toujours pas. Comment résoudre ce problème?

Answer 1

Puisque vous avez appliqué un nom différent pour les composants:

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

Vous devez également avoir le même nom lors de l'exportation: (Cocher pour nommer dans votre composant Tabpane)

 name: 'Tabpane'
 

De l'erreur, ce que je peux dire, c'est que vous n'avez pas défini le name dans votre composant Tabpane . Assurez-vous de vérifier le name et cela devrait fonctionner correctement sans erreur.

Answer 2

J'ai perdu presque une heure, je n'ai pas trouvé de solution, donc je voulais contribuer =)

Dans mon cas, j'importais à tort le composant .. comme ci-dessous:

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

Mais le CORRECT est (sans accolades):

 import MyComponent from './components/MyComponent'
 

Answer 3

Pour les composants récursifs qui ne sont pas enregistrés globalement, il est essentiel d'utiliser non pas «n'importe quel nom», mais le même nom EXACTEMENT que votre composant.

Laissez-moi vous donner un exemple:

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

L'une des erreurs consiste à définir components comme un tableau au lieu d'un objet!

C'est faux:

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

C'est correct:

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

Answer 5

J'ai aussi eu cette erreur. J'ai vérifié trois fois que les noms étaient corrects.

Cependant, j'ai eu cette erreur simplement parce que je ne terminais pas la balise de script .

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

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

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

Notez qu'il n'y a pas </script> à la fin.

Assurez-vous donc de bien vérifier cela.