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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
使用php实现截取指定长度
2013/08/06 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
医学生求职信
2014/07/01 职场文书
中标通知书格式
2015/04/17 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
任命书格式模板
2015/09/22 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书