web-dev-qa-db-fra.com

Comment «importer» un composant Vue dans un composant Vue

C'est peut-être une question vraiment stupide, mais néanmoins, je ne trouve pas de réponse.

Donc, je construis un composant Vue et j'aimerais accéder aux composants de vue-spinner à l'intérieur de mon composant. Comment faire?

Voici des extraits du code en question:

app.js :

Vue.component('players', require('./components/TeamPlayersComponent.vue'));

import GridLoader from 'vue-spinner/src/GridLoader.vue';

const app = new Vue({
    el: '#app',
    components: {
        GridLoader
    }
});

TeamPlayersComponent.vue :

<grid-loader></grid-loader>

Supposons que vue-spinner a été installé (NPM) et que le TeamPlayersComponent.vue Est valide et fonctionne autrement que de donner cette erreur dans la console:

vue.js?3de6:525 [Vue warn]: Unknown custom element: <grid-loader> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component <players> at /home/vagrant/code/rounds-smaa/resources/assets/js/components/TeamPlayersComponent.vue)

J'utilise Vue avec Laravel Elixir et Gulp.

vue.jsvue-component
15
AshMenhennett

Vous pouvez l'obtenir en suivant:

var PulseLoader = require('vue-spinner/src/PulseLoader.vue');

et l'ajouter dans les composants:

new Vue({
  components: {
    'PulseLoader': PulseLoader
  }
})
12
Saurabh

Solution:

Remplacez le code spécifique GridLoader dans app.js (configuration Laravel) par:

Vue.component('grid-loader', require('vue-spinner/src/GridLoader.vue'));

A fonctionné comme prévu!

5
AshMenhennett

Je pense que vous devez enregistrer le composant localement dans le fichier TeamPlayersComponent.vue. Importez le composant et enregistrez-le dans le fichier.

    import gridLoader from 'vue-spinner/src/GridLoader.vue'

Enregistrez ensuite le composant localement.

    components: {
                gridLoader
               }
3
Eko Edita

Vous pouvez également importer comme suit:

import grid-loader from "vue-spinner/src/GridLoader.vue";

puis dans le composant où vous souhaitez l'importer:

components: { grid-loaderfrom }
1
Sumit Patel