vue组件内部引入外部js文件

更新日期: 2019-12-22阅读: 4.1k标签: 文件分享

复制链接

新浪微博

QQ 好友

扫一扫分享

之所以要做这个是因为，在一个组件内部需要引入一个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>

链接: https://fly63.com/article/detial/7328

vue组件内部引入外部js文件

h5移动端实现图片文件上传

前端使用js读取文件操作

HTML5实现文件读取、编辑、保存

血淋淋的事实告诉你：你为什么不应该在JS文件中保存敏感信息

在js文件中引入另一个js文件的实现方法总汇

使用HTML5来实现本地文件读取和写入

lock文件_我们为什么需要 lock 文件

什么是断点续传？前端如何实现文件的断点续传

form表单文件上传_multipart/form-data文件上传

使用HttpClient发送文件流到服务器端