Bagaimana untuk Memuatkan Skrip JS Luaran secara Dinamik dalam Komponen Vue.js?

Memuatkan Skrip JS Luaran Secara Dinamik dalam Komponen Vue.js

Apabila bekerja dengan gerbang pembayaran, penyepaduan skrip luaran yang memudahkan transaksi menjadi perlu. Walau bagaimanapun, selalunya tidak diingini untuk memuatkan skrip ini pada pemuatan halaman awal. Di sinilah Vue.js menawarkan penyelesaian untuk memuatkan skrip luaran secara dinamik dalam komponen tertentu.

Untuk mencapainya, manfaatkan cangkuk kitaran hayat yang dipasang() dalam komponen Vue.js anda. Cangkuk mounted() dilaksanakan selepas komponen telah dipasang dan dimasukkan ke dalam DOM. Ini memberikan peluang yang ideal untuk memuatkan skrip luaran secara bersyarat.

Pertimbangkan contoh berikut, di mana kami memuatkan skrip Google ReCaptcha secara dinamik:

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

Dengan meletakkan logik pemuatan skrip luaran dalam mounted(), kami memastikan bahawa skrip dimuatkan hanya apabila komponen diaktifkan, sekali gus mengekalkan prestasi halaman dan mengoptimumkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Skrip JS Luaran secara Dinamik dalam Komponen Vue.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!