位置: IT常识 - 正文
Vue组件中如何引入外部的js文件(vue 组件调用)
编辑：rootadmin推荐整理分享Vue组件中如何引入外部的js文件(vue 组件调用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue怎么使用组件,vue引用子组件,vue 组件调用,vue引入插件方法,vue如何引用组件,vue引用子组件,vue引用子组件,vue怎么使用组件,内容如对您有帮助，希望把文章链接给更多的朋友！
https://zhuanlan.zhihu.com/p/379504188
背景 在Vue中，通常我们引入一个js插件都是使用npm 方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用npm install xxx 的方式，有什么办法吗？
方式一 简单粗暴，直接在Vue项目的index.html 中使用全局的方式引入，比如：
<title>测评</title><link type="text/css" href="//at.alicdn.com/t/font_43459_d124thd3lgu.css" rel="stylesheet">{{ie9 /resources/js/history.min.js}}// 暴力引入 缺点：不使用该js插件的组件也会加载，而我只想在某个Vue组件中使用该js插件。
方式二 如果是下载到本地的静态文件，可以使用import 的方式导入。
import { xxx } from ‘…/js/xxx.js’ //注意路径 缺点：下载的本地静态文件才可以，远程js文件不可以。
方式三 在Vue组件加载完后，手动操作DOM插入js插件。
export default { mounted() { let script = document.createElement(‘script’); script.type = ‘text/javascript’; script.src = ‘你的js文件地址’; document.body.appendChild(script); }, } 该方式直接操作DOM，只在当前组件插入js插件。
方式四 使用render方法。
export default { components: { ‘xxx-js’: { render(createElement) { return createElement( ‘script’, { attrs: { type: ‘text/javascript’, src: ‘你的js文件地址’, }, }, ); }, }, }, } // 使用 在页面中调用 使用的时候，使用 在页面中调用。
方式五 高阶玩法。将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。
function loadJs(src) { return new Promise((resolve,reject)=>{ let script = document.createElement(‘script’); script.type = “text/javascript”; script.src= src; document.body.appendChild(script);
script.onload = ()=>{ resolve();}script.onerror = ()=>{ reject();}}) }
export default loadJs 使用的时候：
import loadJs from ‘./loadJs’
export default { mounted(){ loadJs(‘http://api.map.baidu.com/xxx.js’).then(()=>{ // 加载成功，进行后续操作 }) } } 方式六 更高阶方式。可以动态替换要加载的js文件。
包装一个importJs.js 插件。
// 导入外部js import Vue from ‘vue’
Vue.component(‘remote-script’, { render: function (createElement) { var self = this; return createElement(‘script’, { attrs: { type: ‘text/javascript’, src: this.src }, on: { load: function (event) { self.KaTeX parse error: Expected 'EOF', got '}' at position 30: …vent); }̲, error…emit(‘error’, event); }, readystatechange: function (event) { if (this.readyState == ‘complete’) { self.$emit(‘load’, event); } } } }); }, props: { src: { type: String, required: true } } }); 使用方式：
// 引入 import ‘common/importJs.js’
// html使用的地方
（完）
上一篇：Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系(京东到家的物流模式)
