位置: 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值)

  • 抖加的钱怎么退回来(抖加的钱怎么退回银行卡)

    抖加的钱怎么退回来(抖加的钱怎么退回银行卡)

  • 华为荣耀8c有手机分身吗(华为荣耀8c怎么设置手写输入法)

    华为荣耀8c有手机分身吗(华为荣耀8c怎么设置手写输入法)

  • 小米CC9怎么设置系统不更新(小米cc9怎么设置下方三个按键)

    小米CC9怎么设置系统不更新(小米cc9怎么设置下方三个按键)

  • 手机qq怎么隐藏所在地(qq在手机上怎么隐藏起来)

    手机qq怎么隐藏所在地(qq在手机上怎么隐藏起来)

  • 苹果11两个摄像头怎么用(苹果11两个摄像头不一样)

    苹果11两个摄像头怎么用(苹果11两个摄像头不一样)

  • 电脑屏幕显示不全有黑边怎么办(电脑屏幕显示不完整不满屏)

    电脑屏幕显示不全有黑边怎么办(电脑屏幕显示不完整不满屏)

  • 小米便签加密后消失了(小米手机中便签加密后的文件在哪)

    小米便签加密后消失了(小米手机中便签加密后的文件在哪)

  • 苹果11系列运行内存在哪看(苹果11运行16.5系统怎么样)

    苹果11系列运行内存在哪看(苹果11运行16.5系统怎么样)

  • g41主板支持多大内存(g41主板支持多大显卡)

    g41主板支持多大内存(g41主板支持多大显卡)

  • 苹果xsmax突然卡屏不动(苹果xsmax突然卡屏重启了)

    苹果xsmax突然卡屏不动(苹果xsmax突然卡屏重启了)

  • 阿里云是私有云还是公有云(阿里云是私有云还是混合云)

    阿里云是私有云还是公有云(阿里云是私有云还是混合云)

  • 在手机上下载什么软件可以开空调(在手机上下载什么软件能赚钱)

    在手机上下载什么软件可以开空调(在手机上下载什么软件能赚钱)

  • 苹果xsmax摔了内部会松动吗(苹果xsmax摔坏的图片真实)

    苹果xsmax摔了内部会松动吗(苹果xsmax摔坏的图片真实)

  • 饿了么风控取消订单是什么意思(饿了么风控取消订单是商家的原因吗)

    饿了么风控取消订单是什么意思(饿了么风控取消订单是商家的原因吗)

  • 为什么路由器恢复出厂设置后不可以上网了(为什么路由器恢复出厂设置连wifi都没了)

    为什么路由器恢复出厂设置后不可以上网了(为什么路由器恢复出厂设置连wifi都没了)

  • 快手交易关闭是什么意思啊(快手付款成功显示交易关闭)

    快手交易关闭是什么意思啊(快手付款成功显示交易关闭)

  • 电子计算器的ce是什么键(电子计算器的CE是什么键)

    电子计算器的ce是什么键(电子计算器的CE是什么键)

  • qq忘了密码手机号不用了怎么办(qq忘了密码手机号不用了)

    qq忘了密码手机号不用了怎么办(qq忘了密码手机号不用了)

  • word文档尾注怎么设置(word文档尾注怎么发不出去)

    word文档尾注怎么设置(word文档尾注怎么发不出去)

  • 手机耳机插电脑上能说话吗(手机耳机插电脑声音小怎么解决)

    手机耳机插电脑上能说话吗(手机耳机插电脑声音小怎么解决)

  • 朋友圈每天删除有上限吗(朋友圈一天删除多少就删除失败了)

    朋友圈每天删除有上限吗(朋友圈一天删除多少就删除失败了)

  • vue字幕字太小怎么调(vue字幕怎么移动位置)

    vue字幕字太小怎么调(vue字幕怎么移动位置)

  • 手机视频怎么传到车上(手机视频怎么传到u盘里)

    手机视频怎么传到车上(手机视频怎么传到u盘里)

  • iphone自动续费怎么申请退款(iphone自动续费怎么取消 没有订阅)

    iphone自动续费怎么申请退款(iphone自动续费怎么取消 没有订阅)

  • 蓝牙5.0和4.0的区别(蓝牙5.0和4.0的区别音质)

    蓝牙5.0和4.0的区别(蓝牙5.0和4.0的区别音质)

  • 阿里众包如何注销工号(阿里众包个人信息怎么完善)

    阿里众包如何注销工号(阿里众包个人信息怎么完善)

  • 怎么赠送黄钻(怎么赠送黄钻红包给好友)

    怎么赠送黄钻(怎么赠送黄钻红包给好友)

  • 企业如何帮员工交公积金
  • 增值税是否计入存货成本
  • 为什么征收增值税体现了量益原则
  • 一季度计提的所得税分录
  • 土增税土地成本分摊方法
  • 贸易类公司做产品代理账务如何处理
  • 账实不符如何调平
  • 会计期末要做的事情
  • 现金预算表中的利息怎么算
  • 经济法中企业营业收入包括哪些?
  • 有现金折扣方式有哪些
  • 固定资产属于净资产的哪一项
  • 营改增后11
  • 企业所得税利润总额和财务报表利润总额不一致
  • 招待客人的场景图
  • 增值税电子发票怎么开具流程
  • 普通发票需要做分录吗?
  • 小规模纳税人国企
  • 新企业所得税法规定的企业包括
  • 递延所得税收益计算公式
  • 机动车发票认证了的发票怎么红冲
  • 会员卡充值赠送金额怎么做账
  • 外汇收汇怎么做账
  • 供应商的账怎么记
  • 增值税加计扣除政策
  • 自建用地是什么性质
  • 小规模纳税人主要缴纳
  • 预付款未收到发票如何做账
  • 企业合并的增值税处理
  • widows11预览版
  • linux 硬盘满了
  • 销售费用税前扣除吗
  • 报销差旅费退回余款
  • wordpress怎么搜索域名
  • 合并报表期初数可以直接抄上年数吗
  • 操作系统的类型和比较
  • 股权转让会记分录
  • 房产税城镇土地使用税申报期限
  • 拉马克是哪国人
  • 认缴没有实缴怎么做账
  • 本月损益类未结转为零的一级科目
  • 小微企业认定标准时间
  • ue4ui界面制作
  • 预算会计的核算对象是什么
  • 赠送油卡怎么使用
  • 小规模免征增值税2023
  • 增值税发票名称可以写个人吗
  • 什么是增值税举个例子
  • 固定资产出租收入属于
  • html导航链接
  • php.ini上传限制
  • 无法收回的房租押金出什么会计科目
  • mysql存储过程语句
  • 归还股东投资款本息怎么做账
  • 丁字账户例题及解析
  • 劳务分包预缴税款计算公式
  • 购买材料计入
  • 贷款服务的利息怎么算
  • 什么叫做差旅费
  • 建筑企业合理避税
  • 一般纳税人主表中的25是怎么来的
  • 小微企业和小规模纳税人的区别
  • 红字发票怎样记账
  • 加快Vista中多线程下载速度
  • windows server 2008.
  • Windows Server 2008域环境下组策略两例应用
  • 电脑上view是什么意思
  • 怎么开aero透明模式
  • Win10 TH2正式版偷偷恢复/篡改成对应的预装应用
  • win8如何设置
  • cocos2d-x 3.4 windows 环境配置
  • android游戏开发 教程
  • perl cgi
  • linux中w命令详解
  • python程序讲解
  • androidapplication
  • Android eclipse for mac redo 快捷键
  • python获取linux磁盘信息
  • 企业登录初始密码
  • 新车怎么上深圳牌
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设