Vuejs：从外部脚本导入函数

Posted 2023-02-22

【中文标题】Vuejs：从外部脚本导入函数

【英文标题】：Vuejs: import function from external script

【发布时间】：2021-02-25 05:53:08

【问题描述】：

我需要从组件内部的外部脚本中获取一些功能。正如我发现的那样，添加这样的外部脚本有两种方法（即贝宝智能按钮）：

首先在挂载的钩子中

mounted() 
    let paypalBtn = document.createElement('script')
    paypalBtn.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=some_client_id')
    document.head.appendChild(paypalBtn)
  

组件的“模板”部分中的第二个

<script type="application/javascript" defer src="https://www.paypal.com/sdk/js?client-id=some_client_id"></script>

问题是我应该如何使用外部脚本中的 paypal.Buttons().render('#element_id') ？如果我在挂载的钩子中这样做，它将按预期通过“未定义”，那么我错过了什么导入语句？

【问题讨论】：

您是否尝试将脚本直接添加到您的 index.html 中？

@fabruex 是的，但它仍然“未定义”在安装中

即使没有defer 属性？

@fabruex 没有延迟也没有延迟

你得到的错误是“paypal is not defined”或者其他什么没有定义？

【参考方案1】：

终于搞定了

你可以添加外部脚本到你的index.html（在我的例子中是在关闭body标签之前）然后使用 window.paypal.Buttons().render() 或您在组件的挂载钩子中需要的任何功能。它在 window.anyFuncName

中可用