如何在VueJS组件中动态包含外部JS脚本？

在 VueJS 组件中包含外部 JS 脚本

在 VueJS 应用程序中，外部脚本可以无缝集成到特定组件中。当脚本打算根据需要加载而不是在应用程序初始化时加载时，这特别有用。例如，只有当用户导航到与支付相关的组件时才需要支付网关脚本。

解决方案

要动态地将外部脚本添加到 VueJS 组件，利用 Mounted() 生命周期挂钩。在此挂钩中：

1. 创建一个脚本元素并将其 src 属性设置为指向所需的脚本文件。
2. 将新创建的脚本元素附加到文档的 中。

示例

考虑一个需要 Google Recaptcha 脚本的组件：

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

<script>
  export default {
    data() {
      return {
        ... your component's data
      };
    },
    mounted() {
      const recaptchaScript = document.createElement('script');
      recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
      document.head.appendChild(recaptchaScript);
    },
    methods: {
      ... your component's methods
    }
  };
</script></code>

通过利用这种方法，Recaptcha仅当组件渲染时才会动态加载脚本。

其他资源

要进一步了解此技术，请参阅以下资源：

• [如何在 Vue 组件上包含脚本标签](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8 )

以上是如何在VueJS组件中动态包含外部JS脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！