web-dev-qa-db-fra.com

avez-vous enregistré le composant correctement? Pour les composants récursifs, veillez à fournir l'option "name"

J'ai configuré 'i-tab-pane': Tabpane mais j'ai signalé une erreur le code est indiqué 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>

Erreur 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

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

Vue.component("Tabpane", Tabpane);

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

vue.jsiview
9
244boy

Depuis que 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: (Cochez pour nommer dans votre composant Tabpane)

name: 'Tabpane'

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

8
Bhojendra Rauniyar

Pour les composants récursifs qui ne sont pas enregistrés globalement, il est essentiel d'utiliser non pas «n'importe quel nom», mais EXACTEMENT le même nom 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'],
    }

4
user3023525