Wie füge ich externe JS-Skripte dynamisch in VueJS-Komponenten ein?

Einbinden externer JS-Skripte in VueJS-Komponenten

Innerhalb einer VueJS-Anwendung können externe Skripte nahtlos in bestimmte Komponenten integriert werden. Dies ist besonders nützlich, wenn Skripte bei Bedarf und nicht bei der Initialisierung der Anwendung geladen werden sollen. Beispielsweise ist ein Zahlungs-Gateway-Skript möglicherweise nur erforderlich, wenn ein Benutzer zu einer zahlungsbezogenen Komponente navigiert.

Lösung

Um externe Skripte dynamisch zu VueJS-Komponenten hinzuzufügen, Nutzen Sie den Lebenszyklus-Hook mount(). Innerhalb dieses Hooks:

1. Erstellen Sie ein Skriptelement und legen Sie dessen src-Attribut so fest, dass es auf die gewünschte Skriptdatei zeigt.
2. Hängen Sie das neu erstellte Skriptelement an den des Dokuments an. Abschnitt.

Beispiel

Stellen Sie sich eine Komponente vor, die das Google Recaptcha-Skript erfordert:

<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>

Durch die Verwendung dieses Ansatzes wird das Recaptcha Das Skript wird nur dynamisch geladen, wenn die Komponente gerendert wird.

Zusätzliche Ressource

Weitere Einblicke in diese Technik finden Sie in der folgenden Ressource:

• [So fügen Sie ein Skript-Tag in eine Vue-Komponente ein](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 )

Das obige ist der detaillierte Inhalt vonWie füge ich externe JS-Skripte dynamisch in VueJS-Komponenten ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!