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

 更新时间:2020年01月18日 14:37:04   作者:竿牍  
这篇文章主要介绍了vue组件内部引入外部js文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

之所以要做这个是因为,在一个组件内部需要引入一个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使用Echarts实现排行榜效果

    Vue使用Echarts实现排行榜效果

    这篇文章主要为大家详细介绍了Vue使用Echarts实现排行榜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue实现的父组件向子组件传值功能示例

    Vue实现的父组件向子组件传值功能示例

    这篇文章主要介绍了Vue实现的父组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Vue双向数据绑定(MVVM)的原理

    Vue双向数据绑定(MVVM)的原理

    这篇文章主要介绍了Vue双向数据绑定的原理,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • 在Vue中实现对文件的压缩和解压缩功能

    在Vue中实现对文件的压缩和解压缩功能

    在前端开发中,文件的压缩和解压缩是经常需要用到的功能,尤其是在需要上传和下载文件的场景下,文件压缩可以减小文件大小,加快文件传输速度,提高用户体验,本文将介绍在Vue项目中如何进行文件的压缩和解压缩,需要的朋友可以参考下
    2023-11-11
  • Vue的click事件防抖和节流处理详解

    Vue的click事件防抖和节流处理详解

    今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Element的Pagination分页sync问题小结

    Element的Pagination分页sync问题小结

    本文主要介绍了Element的Pagination分页sync问题小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue项目下载文件重命名监测进度demo

    vue项目下载文件重命名监测进度demo

    这篇文章主要为大家介绍了vue项目下载文件重命名监测进度demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 在vue中完美使用ueditor组件(cdn)解读

    在vue中完美使用ueditor组件(cdn)解读

    这篇文章主要介绍了在vue中完美使用ueditor组件(cdn)解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue之解决Echarts组件使用ID不能复用的问题

    Vue之解决Echarts组件使用ID不能复用的问题

    这篇文章主要介绍了Vue之解决Echarts组件使用ID不能复用的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue实现父子组件双向绑定的方法总结

    vue实现父子组件双向绑定的方法总结

    Vue.js 是一种流行的 JavaScript 框架,它提供了一种简单且高效的方式来构建用户界面,在 Vue 中,父子组件之间的双向绑定是一种常见的需求,下面我们就来学习一下vue中父子组件双向绑定的常用方法吧
    2023-10-10

最新评论