如何在VueJS组件中添加外部JS脚本?

问题描述：

我必须为支付网关使用两个外部脚本.

I've to use two external scripts for the payment gateways.

现在，两者都放在 index.html 文件中.

Right now both are put in the index.html file.

但是，我不想在一开始就加载这些文件.

However, I don't want to load these files at the beginning itself.

仅当用户打开特定组件(使用路由器视图 )时才需要支付网关.

The payment gateway is needed only in when user open a specific component (using router-view).

反正有实现这一目标的方法吗?

Is there anyway to achieve this?

谢谢.

答

一种简单有效的解决方案，它是通过将外部脚本添加到组件的vue Mounted()中来实现的.我将用 Google Recaptcha 脚本向您说明:

A simple and effective way to solve this, it's by adding your external script into the vue mounted() of your component. I will illustrate you with the Google Recaptcha script:

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

来源: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

如何在VueJS组件中添加外部JS脚本?

相关推荐