Comment charger dynamiquement des scripts JS externes dans les composants Vue.js ?

Chargement dynamique de scripts JS externes dans les composants Vue.js

Lorsque vous travaillez avec des passerelles de paiement, l'intégration de scripts externes qui facilitent les transactions devient nécessaire. Cependant, il n’est souvent pas souhaitable de charger ces scripts lors du chargement initial de la page. C'est là que Vue.js propose une solution pour charger dynamiquement des scripts externes dans des composants spécifiques.

Pour y parvenir, exploitez le hook de cycle de vie Mounted() dans votre composant Vue.js. Le hook Mounted() s'exécute une fois que le composant a été monté et inséré dans le DOM. Cela constitue une opportunité idéale pour charger le script externe de manière conditionnelle.

Considérez l'exemple suivant, dans lequel nous chargeons dynamiquement le script Google ReCaptcha :

<code class="html"><template>
  ... your HTML
</template>

<script>
  export default {
    data: () => ({
      ...data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script');
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
      document.head.appendChild(recaptchaScript);
    },
    methods: {
      ...methods of your component
    },
  };
</script></code>

En plaçant la logique de chargement du script externe dans le hook Mounted(), nous veillons à ce que le script soit chargé uniquement lorsque le composant est activé, préservant ainsi les performances de la page et optimisant l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!