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-481058-1618146301090)]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。