如何在vue组件内引用外部js脚本?

coding2live 2021-02-05 16:29:14 191

为了实现一个支付功能,我需要引入两个外部的js脚本。

我把它们都放到了index.html文件中。

但是,我不想一开始就加载这些文件。因为支付功能只在用户打开特定组件时才会用到(项目中用到了router-view)。

有什么办法实现这个吗?

以下答案仅供参考

有一个简单高效的方法可以实现你的需求。

就是在你的组件的mounted()方法中引入你所需要的的外部脚本。

我用Google Recaptcha为例,做个说明:

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