在 Vue.js 组件中动态加载外部 JS 脚本
使用支付网关时,需要集成促进交易的外部脚本。然而,通常不希望在初始页面加载时加载这些脚本。这就是 Vue.js 提供的解决方案,用于在特定组件中动态加载外部脚本。
要实现此目的,请利用 Vue.js 组件中的 Mounted() 生命周期挂钩。 Mounted() 钩子在组件安装并插入到 DOM 后执行。这提供了有条件加载外部脚本的理想机会。
考虑以下示例,其中我们动态加载 Google ReCaptcha 脚本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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中文网其他相关文章!