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中的事件处理
Jan 16 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
关于vue.js组件数据流的问题
Jul 26 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
js实现九宫格抽奖
Mar 19 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php适配器模式简单应用示例
2019/10/23 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript 程序编码规范
2010/11/23 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python的多态性实例分析
2015/07/07 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
python编写Logistic逻辑回归
2020/12/30 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python内置函数及功能简介汇总
2020/10/13 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
中学教师管理制度
2014/01/14 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
投资协议书范本
2014/04/21 职场文书
员工教育培训协议书
2014/09/27 职场文书
活动总结模板大全
2015/05/11 职场文书