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> 在页面中调用

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

第三种封装一个组件：
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>