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

  • 如何申请一般纳税人
  • 小规模企业所得税会计分录怎么做
  • 小企业外币交易的类型有哪些
  • 应发工资包含请年假吗
  • 叉车折旧年限是多少年
  • 免税进口的自用设备再销售时该怎么征税
  • 跨月应该如何开具红字发票?
  • 如何确定企业
  • 资产损失税前扣除管理办法2019
  • 收到进项发票如何记账
  • 行政单位应缴财政收入预算会计分录
  • 其他货币资金贷方是增加还是减少
  • 负数发票跨月怎么重开
  • 车辆挂靠收取管理费怎么做账
  • 企业的期间费用包括什么
  • 法律关系的内容是指
  • 企业重组中撤资所得税有哪些处理规则?
  • 商业健康保险个人所得税扣除
  • 公司按照实际利润额预缴企业所得税,这个实际利润额就是会计利润吗?
  • 开票软件的地址怎么修改
  • 预缴企业所得税是含税还是不含税
  • 应纳增值税计算公式怎么算
  • 投资性房地产属于流动资产吗
  • 小规模企业如何收款
  • 增值税留抵税额在借方还是贷方
  • windows预览体验计划选哪个渠道
  • 库存现金的主要内容有哪些
  • 增值税怎么填表
  • 融资租赁和经营租赁哪个更常见
  • 如何激活windows10免费
  • PHP:pg_set_client_encoding()的用法_PostgreSQL函数
  • 其他业务收入借贷方向
  • 差旅费报销管理规定2022
  • 所得税年度报表资产总额
  • iis制作网页
  • 合并及公司利润表
  • frameworkscheduled
  • jsp课程设计含源代码
  • ZED2跑ORB-SLAM3+双目相机、IMU联合标定+显卡驱动与cuda/cudnn安装
  • node深入浅出pdf
  • react错误处理
  • 员工社保缴纳规定标准
  • 日记账的定义
  • 什么叫做增值税的新增价值呢
  • 个体户怎么办
  • 复印件可以作为会计原始凭证吗
  • 债权投资相关科目
  • 审计库存现金盘点表
  • 商贸公司购买的水磅怎么入账
  • 党委经费是国家政府出吗?
  • 跨月发票作废怎么做会计分录
  • 餐饮会计做账流程图
  • 商品流通企业会计
  • eclipse连接mysql代码
  • 简单谈谈设计与市场的关系
  • 完整版的苏若雪和沈浪
  • win10系统无法开机怎么修复
  • windows 10 mobile apk
  • linux系统编译命令
  • windows关机电源不断电
  • ie无法打开https
  • win8整理磁盘碎片的步骤
  • Linux如何查看硬盘分区
  • win10怎么把动图设置成壁纸
  • win10系统怎么cmd
  • 基于jQuery中ajax的相关方法汇总(必看篇)
  • 阴影效果有什么用
  • 用jquery制作网页
  • 什么是四个菜
  • nodejs调用打印机驱动
  • 基于python的聊天软件
  • javascript主要学什么
  • import python-docx
  • dom 和bom
  • javascript简明教程
  • 安卓应用 开发
  • 新电子税务局使用方法
  • 北京 国税局
  • 营业税金及附加结转分录
  • 哪些账本需要贴纸
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设