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 26 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
移动端js图片查看器
Nov 17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
微信小程序实现简单文字跑马灯
May 26 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
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
js 编写规范
2010/03/03 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
在django模板中实现超链接配置
2019/08/21 Python
python加载自定义词典实例
2019/12/06 Python
Python列表推导式实现代码实例
2020/09/09 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
曼城官方网上商店:Manchester City
2019/09/10 全球购物
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
合伙购房协议样本
2014/10/06 职场文书
给医院的感谢信
2015/01/21 职场文书
中学生逃课检讨书
2015/02/17 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers