webpack - vuejs - vue loader

Importación de componentes Vue con Webpack

Question

Tengo una aplicación de Vue Hello World con Webpack y tengo el componente inicial de la aplicación funcionando y montado en el cuerpo. Aunque dentro de ese componente de la aplicación no puedo entender cómo usar más componentes que hice.

main.js

import Vue from ''vue''
import App from ''./app.vue''

new Vue({ 
    el: ''body'',
    components: { App }
})

app.vue

<template>
    <div class="message">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: ''Hello World''
            }
        }
    }
</script>

Yo he tratado

import TopBar from ''./top-bar.vue''

En main.js y en la sección de scripts de app.vue, intenté usar

<top-bar></top-bar>

sin suerte

Creo que me falta cómo registrar el componente correctamente, como en los documentos de Vue:

Vue.component(''top-bar'', TopBar);

Pero creo que al usar el paquete web con vue-loader necesito hacer algo diferente.

Answer 1

Puede darle un nombre adecuado en el objeto de componentes como se muestra a continuación

<template>
    <nav-bar></nav-bar>
</template>

<script>

    import TopBar from ''./TopBar.vue''

    export default {
        components: {
            ''nav-bar'': TopBar
        }
    }
</script>

Answer 2

Puede registrarlo de manera global como lo mostró, o si desea registrarlo localmente para usarlo en un solo componente, debe agregarlo al components objeto de la instancia de Vue:

<template>
    <top-bar></top-bar>
    <div class="message">{{ message }}</div>
</template>

<script>
    import TopBar from ''./top-bar.vue''
    export default {
        data () {
            return {
                message: ''Hello World''
            }
        },
        components: {
            TopBar
        }
    }
</script>