Comment inclure dynamiquement des scripts JS externes dans les composants VueJS ?

Inclure des scripts JS externes dans les composants VueJS

Dans une application VueJS, les scripts externes peuvent être intégrés de manière transparente dans des composants spécifiques. Ceci est particulièrement utile lorsque les scripts sont destinés à être chargés selon les besoins plutôt qu'à l'initialisation de l'application. Par exemple, un script de passerelle de paiement ne peut être requis que lorsqu'un utilisateur accède à un composant lié au paiement.

Solution

Pour ajouter dynamiquement des scripts externes aux composants VueJS, exploitez le hook de cycle de vie Mounted(). Dans ce hook :

1. Créez un élément de script et définissez son attribut src pour qu'il pointe vers le fichier de script souhaité.
2. Ajoutez l'élément de script nouvellement créé au

Exemple

Considérons un composant qui nécessite le script Google Recaptcha :

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

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

En utilisant cette approche, le Recaptcha Le script sera chargé dynamiquement uniquement lorsque le composant sera rendu.

Ressource supplémentaire

Pour plus d'informations sur cette technique, veuillez vous référer à la ressource suivante :

• [Comment inclure une balise de script sur un composant Vue](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 )

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!