位置: IT常识 - 正文

Vue组件中如何引入外部的js文件(vue 组件调用)

编辑:rootadmin
Vue组件中如何引入外部的js文件

推荐整理分享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方法。

Vue组件中如何引入外部的js文件(vue 组件调用)

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使用的地方

(完)

本文链接地址:https://www.jiuchutong.com/zhishi/298535.html 转载请保留说明!

上一篇:Vue3 京东到家项目实战第一篇(首页及登录功能开发) 进阶式掌握vue3完整知识体系(京东到家的物流模式)

下一篇:Vue|获取表单数据(vue获取value值)

  • 掌握这四点,帮你做好区域推广!(帮手的方法)

    掌握这四点,帮你做好区域推广!(帮手的方法)

  • 企业微信如何设置管理员(企业微信如何设置标签)

    企业微信如何设置管理员(企业微信如何设置标签)

  • 钉钉打卡在哪里打(钉钉打卡怎样在家里打)

    钉钉打卡在哪里打(钉钉打卡怎样在家里打)

  • 核酸检测采集码哪里申请(核酸检测采集码怎么获取)

    核酸检测采集码哪里申请(核酸检测采集码怎么获取)

  • 苹果xsmax怎么开机(苹果xsmax怎么开震动)

    苹果xsmax怎么开机(苹果xsmax怎么开震动)

  • 苹果手机隐形按键如何设置(苹果手机隐形按钮)

    苹果手机隐形按键如何设置(苹果手机隐形按钮)

  • 苹果手机隐私相机设置不了(苹果手机隐私相册在哪里打开)

    苹果手机隐私相机设置不了(苹果手机隐私相册在哪里打开)

  • 进网许可和进网试用有什么区别(进网许可和进网试用哪个好一点)

    进网许可和进网试用有什么区别(进网许可和进网试用哪个好一点)

  • 电脑斜杠符号怎么打(电脑斜杠符号怎样打出来)

    电脑斜杠符号怎么打(电脑斜杠符号怎样打出来)

  • 手机中毒会感染wifi吗(手机中毒会感染病毒吗)

    手机中毒会感染wifi吗(手机中毒会感染病毒吗)

  • 耳机anc什么意思(耳机ac是什么意思)

    耳机anc什么意思(耳机ac是什么意思)

  • 微信表情皱眉什么意思(微信表情皱眉是哪个)

    微信表情皱眉什么意思(微信表情皱眉是哪个)

  • 华为手机原装膜是什么膜(华为手机原装膜刮花了怎么办)

    华为手机原装膜是什么膜(华为手机原装膜刮花了怎么办)

  • 拼多多退货运费险退到哪里(拼多多退货运费审核未通过怎么办)

    拼多多退货运费险退到哪里(拼多多退货运费审核未通过怎么办)

  • 笔记本电脑开机显示自动修复怎么办(笔记本电脑开机黑屏)

    笔记本电脑开机显示自动修复怎么办(笔记本电脑开机黑屏)

  • 电脑主机上有个红灯一直闪是什么(电脑主机上有个小按钮是干嘛的)

    电脑主机上有个红灯一直闪是什么(电脑主机上有个小按钮是干嘛的)

  • 苹果6可以用5g网络吗(iphone 6可以用5g吗)

    苹果6可以用5g网络吗(iphone 6可以用5g吗)

  • 怎么把视频保存到手机相册(怎么把视频保存成图片)

    怎么把视频保存到手机相册(怎么把视频保存成图片)

  • 手机4g网络慢怎么办(手机4g网很慢)

    手机4g网络慢怎么办(手机4g网很慢)

  • 在哪设置群名片(群成员名片怎么弄)

    在哪设置群名片(群成员名片怎么弄)

  • 时控开关怎么调时间(时控开关怎么调每天定时开关)

    时控开关怎么调时间(时控开关怎么调每天定时开关)

  • 怎么取消百度网盘的超级会员自动续费(怎么取消百度网盘)

    怎么取消百度网盘的超级会员自动续费(怎么取消百度网盘)

  • 相册图片删除怎么恢复(删除相册里的照片儿)

    相册图片删除怎么恢复(删除相册里的照片儿)

  • windows7如何设置开机密码(windows7如何设置自动关机时间)

    windows7如何设置开机密码(windows7如何设置自动关机时间)

  • 关于办理退税手续的通知
  • 固定资产报废收入
  • 公司中介费收入如何纳税
  • 更换税控盘后原发票如何导入旧盘开票税局
  • 怎样查是否为一类银行卡
  • 税务筹划的12种方法知乎
  • 发票开工程服务和工程款的区别
  • 应付债券利息计入哪里
  • 营改增后建筑行业甲供材
  • 原材料被盗计入什么科目
  • 收回已确认的坏账的应收账款
  • 库存盘盈盘亏按进价还是售价
  • 解除合同补偿金需要缴纳个税吗
  • 交通费汇算清缴怎么做账
  • 有形动产租赁包括有形动产融资租赁
  • 定额发票已经取得怎么办
  • 公司开发票就会报税吗?
  • 一般纳税人开技术服务费
  • 发票添加商品编码怎么填
  • 建筑业预征缴纳税款
  • 增值税减少在借方还是贷方
  • 不经常发生应税行为的企业可以选择按小规模纳税人纳税
  • 跨地区建筑安装企业个人所得税征收方式申请表
  • 自己的公司钱能自己用吗
  • 进口商品买卖的关键环节
  • 工业企业成本结转金额怎么确定
  • 走物流的货物如何收费
  • 报关单上的运费怎么看
  • 月末税金及附加税金的账务处理
  • 过期未抵扣的发票对企业有什么影响
  • 个人独资企业免费刻章吗
  • 跨月发票冲红账怎么做
  • 金蝶存货核算的基本流程
  • win11怎么调整任务栏位置
  • c++ 库文件
  • kb4586819更新
  • 在php中,字符串有哪些表示形式
  • PHP:pg_field_type_oid()的用法_PostgreSQL函数
  • 增值税发票销货清单哪里领
  • vue前端开发规范
  • 交通运输业成本构成比例
  • 什么是动态表单
  • php实现留言板功能
  • php linux 环境搭建
  • 营业外支出准则
  • 缴纳社保的时候工资填写多少
  • 原生js获取document
  • mtd命令
  • 深入了解jvm
  • 高效刷题app
  • 进项税额有留底税额吗
  • 长期借调人员工资福利
  • 那怎么才能恢复
  • 小规模减免的附加税怎么做账
  • 企业广告费以后会涨吗
  • 无形资产达到可使用状态前如何入账
  • 怎么冲减多计提的工会经费
  • 企业给加盟店的钱怎么算
  • 固定资产折旧成本票据类型
  • 进项税额转出有余额怎么调整
  • 公司为员工购买汽车怎么申报
  • jdbc取数据
  • 微软官微
  • linux的sh
  • centos8 bond0
  • 电脑提示Windows照片查看器无法打开此图片
  • windows8应用商店在哪
  • linux安装与部署
  • cocos2d android 游戏开发学习——CCAction(一)
  • 金庸笔下十大最受欢迎人物
  • 用简洁的语言推荐一本书
  • nodejs创建vue
  • 神奇宝贝
  • android基础知识大全
  • sdk和安卓版本
  • Javascript valueOf 使用方法
  • jQuery 更改checkbox的状态,无效的解决方法
  • 医院电子发票怎么查
  • 烟台国家税务局王局长
  • 南宁税务局进面分数线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设