Импорт компонентов Vue с помощью Webpack

У меня есть приложение для настройки Vue в мире приветствия с помощью Webpack и у меня есть исходный компонент приложения, который работает и монтируется в теле. Хотя в этом компоненте приложения я не могу понять, как использовать больше компонентов, которые я сделал.

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>

Я пробовал

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

В обоих файлах main.js и script файла app.vue затем попытался использовать

<top-bar></top-bar>

без везения.

Я думаю, что мне не хватает возможности правильно зарегистрировать компонент, например, в документах Vue:

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

Но я думаю, что при использовании webpack с vue-loader мне нужно сделать что-то другое.

Ответ 1

Вы можете зарегистрировать его по всему миру, как вы показали, или если вы хотите зарегистрировать его локально для использования в одном компоненте, вам нужно добавить его в объект components экземпляра 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>

Ответ 2

Вы можете присвоить ему подходящее имя в объекте компонентов, как показано ниже.

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

<script>

    import TopBar from './TopBar.vue'

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