如何在VueJS组件中添加外部JS脚本? [英] How to add external JS scripts to VueJS Components?

问题描述

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

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脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！