web-dev-qa-db-fra.com

Comment utiliser les composants Vue Async?

J'utilise laravel 5.4 et vue 2 et je souhaite charger un composant en async à l'aide d'un bouton. Mes composants Vue js sont séparés: example.vue et test.vue et je les charge en tant que balise HTML.

Ceci est mon app.js: 

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

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

C'est l'endroit pour afficher les composants

    <How can i use Async components?div id="app">
         <example2></example2> 
    </div>

Comment utiliser les composants asynchrones?

Non, je pense que tu ne me comprends pas. C'est mon enregistrement de composant 

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

Vue.component('example2', function (resolve) {

require(['./components/Example2.vue'],resolve)

})


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

et dans require, il est résolu par défaut (comme indiqué) Je ne sais pas comment dois-je passer les clés de résolution et de rejet de cette méthode dans ma page lorsque j'appelle le composant.

vue.jsvuejs2async-components
8
K1-Aria

Vous pouvez utiliser le composant async dans la vue 2 avec un style. Utiliser correctement un composant async peut réduire le temps de chargement de votre projet . Vous pouvez utiliser un composant asynchrone comme suit:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router ({
routes: [
  {
    path: '/',
    name:'LandingPage'
    component: () => import('@/containers/LandingPage.vue')
  },
  {
    path: '/login',
    name:'LoginPage'
    component: () => import('@/containers/LoginPage.vue')
  }
]
})

Cette structure est plus esthétique pour le chargement de composants dans le modèle:

new Vue ({
  el: 'app',
    components: {
      AsyncComponent: () => import ('./AsyncComponent.vue')
    }
})

Vous pouvez consulter: www.bdtunnel.com pour plus d'informations.

7
Sukanta Bala

Selon documentation sur VueJs , vous pouvez définir des composants asynchrones comme celui-ci depuis la version 2.3.

const AsyncComp = () => ({
  // The component to load. Should be a Promise
  component: import('./MyComp.vue'),
  // A component to use while the async component is loading
  loading: LoadingComp,
  // A component to use if the load fails
  error: ErrorComp,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

Vous pouvez l'utiliser conjointement avec built in composant pour charger vos composants de manière dynamique.

EDIT: Un lien mis à jour vers la documentation mentionnée .

2
Gorky

Une façon dont j'ai fait ce genre de chose est de créer votre composant example2 avec la configuration suivante:

<template>
  <div>
    <div v-if="inited">
      <div>{{foo}}</div>
      <div>{{bar}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        foo: '',
        bar: '',
        inited: false
      }
    },
    mounted() {
      var me = this
      axios.get('/my/ajax/call').then(function(response) {
        me.foo = response.data.foo
        me.bar = response.data.bar
        me.inited = true
      })
    }
  }
</script>

Fondamentalement, chaque fois que le composant est monté, il restitue des informations vides jusqu'à ce que l'appel AJAX soit terminé, puis les données réactives sont mises à jour et Vue met à jour automatiquement les éléments de données réactifs. Si vous ne souhaitez pas que d'autres balises ou éléments du modèle soient visibles, vous pouvez toujours créer une propriété de données inited: false et la définir sur true dans le rappel AJAX, puis utiliser les directives :v-if="inited" ou :v-show="inited" sur un wrapper div pour masquer le contenu du composant jusqu'au retour de l'appel AJAX.

1
dzwillia