如何在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中文网其他相关文章！