web-dev-qa-db-fra.com

Comment utiliser les composants globaux VueJS 2 dans des composants à fichier unique?

J'essaie d'utiliser un composant enregistré globalement (avec Vue.component) à l'intérieur d'un composant de fichier unique mais je reçois toujours

vue.common.js:2611[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?

Par exemple:

main.js:

...
Vue.component('my-component', {
    name: 'my-component',
    template: '<div>A custom component!</div>'
})
...

home.vue:

<template>
    <div>
        <my-component></my-component>
    </div>
</template>
<script>
    module.exports = {
        name: 'home'
    }
</script>

Si je l'enregistre localement, cela fonctionne OK:

<template>
    <div>
        <my-component></my-component>
    </div>
</template>
<script>
module.exports = {
    name: 'home',
    components: {
        'my-component': require('./my-component.vue')
    }
}
</script>
javascriptvue.jsvue-component
23
J. Molinero

Vous n'avez pas besoin du module.exports. Vous pouvez enregistrer le composant globalement en le plaçant dans le fichier mycomponent.vue.

<template>
    <div>A custom component!</div>
</template>
<script>
    export default {}
</script>

Ajoutez ensuite à main.js

import MyComponent from './component.vue'
Vue.component('my-component', MyComponent);

ou je les enregistre généralement dans un fichier "global" qu'ils importent dans le fichier principal.

Cela devrait alors vous permettre d'utiliser my-component n'importe où dans l'application.

48
Bryan Kneis

Component.vue

<template><div>A custom component!</div></template>

<script>export default { code here... }</script>

Utilisez ce composant dans home.vue:

<template>
    <div>
        <my-component></my-component>
    </div>
</template>

 <script>
    import component from './component.vue'
    export default {
     components: { my-component: component }
    }
</script>
3
Med