vue 引入原生js_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文件地址',

},

},

);

},

},

},

}

// 使用 在页面中调用

第三种封装一个组件：

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'

// 使用

image.png