vue组件内部引入外部js文件的方法


Posted in Javascript onJanuary 18, 2020

之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位。如果放在index.html,这样每个组件都会有这个js。所以需要在组件内单独引入。

第一种操作 Dom引入js:

export default {
 mounted() {
  const s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = '你的需要的js文件地址';
  document.body.appendChild(s);
 },
}

第二种使用 createElement 方法:

export default {
 components: {
  'remote-js': {
   render(createElement) {
    return createElement(
     'script',
     {
      attrs: {
       type: 'text/javascript',
       src: '你的需要的js文件地址',
      },
     },
    );
   },
  },
 },
}
// 使用 <remote-js></remote-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.$emit('load', event);
        },
        error: function (event) {
          self.$emit('error', event);
        },
        readystatechange: function (event) {
          if (this.readyState == 'complete') {
            self.$emit('load', event);
          }
        }
      }
    });
  },
  props: {
    src: {
      type: String,
      required: true
    }
  }
});
// 引入
import 'common/importJs.js'
// 使用
<remote-script src="https://pv.sohu.com/cityjson?ie=utf-8"></remote-script>

vue组件内部引入外部js文件的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
微信小程序 navbar实例详解
May 11 Javascript
微信小程序实现多选功能
Nov 04 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 #Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 #Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
You might like
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php MySQL与分页效率
2008/06/04 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
Javascript面向对象编程
2012/03/18 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
企业法人代表任命书
2014/06/06 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL