Confusion au sujet des extensions .vue - "Elément personnalisé inconnu: <topmenu>"

Question

J'essaie de travailler la plaquette électron-vue. Après la mise en place des travaux de tout projet, mais comme je crée un nouveau fichier .vue (TopMenu.vue) Je reçois:

vue.common.js?4eb4:2569 [Vue warn]: Unknown custom element: <topmenu> - 
did you register the component correctly? For recursive components, make 
sure to provide the "name" option. (found in component <landing-page>) 

J'utilise la syntaxe exacte que les fichiers .VUE originaux qui sont venus avec le passe-partout:

LandingPageVue.vue:

<style scoped> 
    img { 
    margin-top: -25px; 
    width: 450px; 
    } 
</style> 

<template> 
    <div> 
    <!-- <img src="./LandingPageView/assets/logo.png" alt="electron-vue"> --> 
    <h1>Welcome.</h1> 
    <topmenu></topmenu> 
    <current-page></current-page> 
    <versions></versions> 
    <links></links> 

    <div class="container"> 

    </div> 
</template> 


<script> 
    import TopMenu from './LandingPageView/TopMenu' 
    import CurrentPage from './LandingPageView/CurrentPage' 
    import Links from './LandingPageView/Links' 
    import Versions from './LandingPageView/Versions' 

    export default { 
    components: { 
     TopMenu, 
     CurrentPage, 
     Links, 
     Versions 
    }, 
    name: 'landing-page' 
    } 
</script> 

TopMenu.vue (mon dossier):

<template> 
    <p> 
    TOPMENU 
    </p> 
</template> 

Par ailleurs, comment le hack <current-page></current-page> fonctionne (notez le "-" tiret) si ci-dessous il est déclaré sans?

Answer 1

Il ne fonctionne pas parce que vous n'êtes pas exporter quoi que ce soit dans votre fichier vue.

Essayez ceci dans votre fichier TopMenu.vue:

<template> 
    <p> 
    TOPMENU 
    </p> 
</template> 

<script> 
    export default { 
    } 
</script> 

aussi changer le code html <topmenu></topmenu> à <top-menu></top-menu>

Pour votre deuxième question, HTML est insensible à la casse pour que vos composants de cas de titre ne correspondraient pas avec Tags html. Donc Vue traduit les composants de votre casse de titre en un «dash-case». De la documentation elle-même, il y a l'explication pourquoi:

Notez que Vue ne pas respecter les règles du W3C pour les noms de balises personnalisées (tout en minuscule, doit contenir un trait d'union) mais suivant cette convention est considérée comme une bonne pratique.

Vous pouvez lire la suite de la la docs