使用支付網關時，需要整合促進交易的外部腳本。然而，通常不希望在初始頁面載入時載入這些腳本。這就是 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中文網其他相關文章！
