Bagaimana untuk Memasukkan Skrip JS Luaran secara Dinamik dalam Komponen VueJS?

Termasuk Skrip JS Luaran dalam Komponen VueJS

Dalam aplikasi VueJS, skrip luaran boleh disepadukan dengan lancar ke dalam komponen tertentu. Ini amat berguna apabila skrip bertujuan untuk dimuatkan pada asas yang diperlukan dan bukannya pada permulaan aplikasi. Sebagai contoh, skrip get laluan pembayaran mungkin hanya diperlukan apabila pengguna menavigasi ke komponen berkaitan pembayaran.

Penyelesaian

Untuk menambah skrip luaran secara dinamik pada komponen VueJS, memanfaatkan cangkuk kitar hayat yang dipasang (). Dalam cangkuk ini:

1. Buat elemen skrip dan tetapkan atribut srcnya untuk menghala ke fail skrip yang diingini.
2. Tambahkan elemen skrip yang baru dibuat pada bahagian.

Contoh

Pertimbangkan komponen yang memerlukan skrip 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>

Dengan menggunakan pendekatan ini, Recaptcha skrip akan dimuatkan secara dinamik hanya apabila komponen dipaparkan.

Sumber Tambahan

Untuk mendapatkan gambaran lanjut tentang teknik ini, sila rujuk sumber berikut:

• [Cara Memasukkan Teg Skrip pada Komponen Vue](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 )

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