vue组件引入数组js文件
时间: 2023-12-04 10:05:49 浏览: 40
可以在 Vue 组件的 `mounted` 或 `created` 钩子函数中使用动态创建 `script` 标签的方式引入数组类型的 JS 文件,例如:
```html
<template>
<div>
<!-- 组件内容 -->
</div>
</template>
<script>
export default {
created() {
const scripts = [
'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
'https://unpkg.com/lodash'
// 这里可以添加更多的 JS 文件
]
scripts.forEach(src => {
const script = document.createElement('script')
script.src = src
script.async = true
document.body.appendChild(script)
})
}
}
</script>
```
在上面的代码中,我们在 `created` 钩子函数中创建了一个数组 `scripts`,其中包含了需要引入的 JS 文件的 URL。然后我们使用 `forEach` 循环遍历数组,创建 `script` 标签并设置 `src` 属性为当前循环的 URL。最后将 `script` 标签添加到 `body` 中即可。需要注意的是,我们设置了 `async` 属性为 `true`,这将使得 JS 文件被异步加载,不会阻塞页面的渲染。如果需要保证 JS 文件的加载顺序,可以考虑使用 `Promise` 或其他方式来实现。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)