如何在Vue.js元件中動態載入外部JS腳本？

在 Vue.js 元件中動態載入外部 JS 腳本

使用支付網關時，需要整合促進交易的外部腳本。然而，通常不希望在初始頁面載入時載入這些腳本。這就是 Vue.js 提供的解決方案，用於在特定元件中動態載入外部腳本。

要實現此目的，請利用 Vue.js 元件中的 Mounted() 生命週期掛鉤。 Mounted() 鉤子在組件安裝並插入到 DOM 後執行。這提供了有條件載入外部腳本的理想機會。

考慮以下範例，其中我們動態載入Google ReCaptcha 腳本：

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

透過將外部腳本載入邏輯放在Mounted() 鉤子，我們確保僅在元件啟動時載入腳本，從而保持頁面效能並優化用戶體驗。

以上是如何在Vue.js元件中動態載入外部JS腳本？的詳細內容。更多資訊請關注PHP中文網其他相關文章！