web-dev-qa-db-fra.com

Importation Vue Composants avec Webpack

J'ai un monde de salut Vue, l'application est configurée avec Webpack et le composant d'application initial fonctionne et est monté sur le corps. Même si, dans ce composant d'application, je ne sais pas comment utiliser davantage de composants que j'ai créés.

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>

J'ai essayé

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

Dans main.js et dans la section script de app.vue, vous avez ensuite essayé

<top-bar></top-bar>

sans chance.

Je pense que je ne vois pas comment enregistrer correctement le composant, comme dans le Vue docs il fait:

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

Mais je pense qu'en utilisant webpack avec vue-loader, je dois faire quelque chose de différent.

webpackvue.js
30
ThingWings

Vous pouvez l'enregistrer globalement comme vous l'avez montré ou, si vous souhaitez l'enregistrer localement pour l'utiliser dans un seul composant, vous devez l'ajouter à l'objet components de l'instance 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>
42
Jeff

Vous pouvez lui donner un nom approprié dans l'objet composants, comme indiqué ci-dessous.

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

<script>

    import TopBar from './TopBar.vue'

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