vue组件内部引入外部js文件__vue引入外部js文件并使用

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

玉树临风的冲锋衣 · 一菲籍华裔女经理遭“撕票”-中国法院网· 5 月前 ·

礼貌的小熊猫 · 【NP虐文推荐】《当我被迫剖丹之后》他们都要 ...· 11 月前 ·

年轻有为的山羊 · 绝世唐门：唐舞桐新模型公布，刘海问题被解决， ...· 1 年前 ·

温柔的鸵鸟 · 广联达是干嘛的_广联达是干嘛的,怎么解锁_广 ...· 1 年前 ·

气势凌人的麦片 · 本内容在618期间有重大购机指导意义-品玩· 1 年前 ·

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