Comment ajouter un composant dans Vue 2

Question

J'ai créé une application Vue 2.5.2 avec vue-cli.

J'ai essayé de créer mon premier composant (<jsontree />) qui travaille sur son propre mais je ne peux pas comprendre comment enregistrer à utiliser dans un autre composant (<HelloWorld>)

Voici le message d'erreur que je reçois:

[Vue warn]: Unknown custom element: <jsontree> - did you register the component correctly? For recursi§ve components, make sure to provide the "name" option. 

found in 

---> <HelloWorld> at src/components/HelloWorld.vue 
     <App> at src/App.vue 
     <Root> 

c'est le modèle de » HelloWorld:

<template> 
    <div> 
    <jsontree /> 
    </div> 
</template> 

il fonctionne quand je navigue lui "directement", thi s est mon fichier itinéraires:

import Vue from 'vue' 
import Router from 'vue-router' 
import HelloWorld from '@/components/HelloWorld' 
import JsonTree from '@/components/jsonTree' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Hello', 
     component: HelloWorld 
    }, 
    { 
     path: '/tree', 
     name: 'Tree', 
     component: JsonTree 
    } 
    ] 
}) 

Answer 1

Il vous manque la partie <script>.

également, il est usuel, mais pas obligatoire, d'écrire avec kebab-case à l'intérieur du modèle.

moteur Vue est responsable de ce qui vous permet d'écrire avec kebab-case à l'intérieur du modèle, même si vous avez importé comme camelCase au sein de votre script

voir le code:

HelloWorld.vue

<template> 
    <div> 
    <json-tree /> 
    </div> 
</template> 

<script> 
import jsonTree from './jsonTree.vue' // or wheatever location this component is residing. 
export default { 
    components: {jsonTree} 
} 
</script>