Bagaimana untuk Memuatkan Skrip JS Luaran dalam Komponen VueJS atas Permintaan?

Memuatkan Skrip JS Luaran dalam Komponen VueJS atas Permintaan

Dalam aplikasi Vue.js, anda mungkin menghadapi senario di mana komponen tertentu memerlukan skrip JavaScript luaran . Secara lalai, skrip luaran ditambahkan pada fail index.html, yang boleh membawa kepada pemuatan yang tidak perlu apabila skrip tersebut tidak diperlukan serta-merta.

Untuk menangani isu ini, Vue.js menyediakan cara yang mudah untuk memuatkan luaran secara dinamik skrip dalam komponen, memastikan ia tersedia hanya apabila perlu. Teknik ini melibatkan penggunaan cangkuk kitar hayat yang dipasang().

Penyelesaian:

Coretan kod berikut menunjukkan cara memuatkan skrip luaran dalam komponen Vue.js menggunakan cangkuk mounted():

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

<script>
  export default {
    data: () => ({
      ... data for your component
    }),
    mounted() {
      let externalScript = document.createElement('script')
      externalScript.setAttribute('src', 'https://example.com/external-script.js')
      document.head.appendChild(externalScript)
    },
    methods: {
      ... methods for your component
    }
  }
</script></code>

Faedah:

• Pemuatan terpilih: Skrip luaran hanya dimuatkan apabila komponen dipasang , mengoptimumkan prestasi.
• Modulariti: Komponen boleh kekal bebas, kerana skrip luaran dimuatkan secara berasingan.
• Prestasi dipertingkat: Dengan memuatkan skrip pada permintaan, anda mengelakkan kembung masa memuatkan halaman secara tidak perlu.

Sumber Contoh:

Penyelesaian ini diadaptasi daripada artikel oleh Lassi Iso-Uosukainen: https: //medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

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