Importowanie komponentów Vue z pakietem Webpack

Question

Mam hello world Instalację aplikacji Vue z pakietem Webpack i początkowy składnik aplikacji działa i jest montowany na ciele. Chociaż w tym komponencie aplikacji nie mogę wymyślić, jak użyć więcej komponentów, które zrobiłem.

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> 

Próbowałem

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

w obu main.js oraz sekcję scenariusz app.vue następnie spróbował wykorzystać

<top-bar></top-bar> 

bez powodzenia.

Chyba brakuje jak zarejestrować komponent prawidłowo, tak jak w docs Vue robi:

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

Ale myślę, że w przypadku korzystania z WebPACK vue-ładowarki muszę zrobić coś innego.

Answer 1

można zarejestrować go globalnie jak pokazałeś, lub jeśli chcesz zarejestrować go lokalnie do użytku w jednym składniku trzeba dodać ją do components obiektu instancji 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> 

Answer 2

Można nadaj mu odpowiednią nazwę w obiekcie składników, jak pokazano poniżej:

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

<script> 

    import TopBar from './TopBar.vue' 

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