Vue.js - Mit Kindern Komponenten in einer einzelnen Datei Component

Question

Ich habe eine Vue.js App. In dieser App habe ich ein single file component. In dieser Komponente möchte ich eine andere Komponente haben, die spezifisch für die Komponente ist. Ich versuche, so etwas zu tun:

parent.vue

<template> 
    <div> 
    <child-component></child-component><br /> 
    <child-component></child-component> 
    </div> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     info: 'hello' 
     } 
    }, 

    components: { 
     childComponent: { 
     template: '<div>child</div>', 
     data() { return {}; } 
     } 
    } 
    } 
</script> 

Nachdem mit webpack Aufbau habe ich dann im Browser meine app laufen. Das App erzeugt dann einen Fehler im Konsolenfenster, das sagt:

Unbekannt individuelles Element: - haben Sie die Komponente korrekt registrieren?

Ich glaube, ich dies richtig eingerichtet haben. Klar habe ich das aber nicht. Was mache ich falsch? Ich kann sehen, wo ich vielleicht keine "Kinderkomponente" registriert habe. Wie auch immer, ich bin mir nicht sicher, wie ich das in einer einzigen Dateikomponente machen soll. Was vermisse ich?

Danke,

Answer 1

einige Ideen, die hilfreich sein könnten: - wie thanksd darauf hingewiesen, registrieren "Kind-Komponente" intead von childComponent:

components: { 
     "child-component": { 
     template: '<div>child</div>', 
     data() { return {}; } 
     } 
    } 

• stellen Sie sicher, das Register Komponente, bevor die vue Instanz erstellen (dies für Ihren Fall anwenden kann oder nicht, kann ich nicht aus dem Quellcode sagen Sie auf dem Laufenden:

  Vue.component (c Hild-Komponente‘, { Vorlage: 'Kind', data() {return {}; }} )

  neue Vue ({el: '#app'})