之所以要做這個是因為，在一個組件內(nèi)部需要引入一個js文件來定位。如果放在index.html，這樣每個組件都會有這個js。所以需要在組件內(nèi)單獨引入。

第一種操作 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> 在頁面中調(diào)用

|

第三種封裝一個組件：

importJs.js

`// 導(dǎo)入外部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](https://pv.sohu.com/cityjson?ie=utf-8)"``></remote-script>`

[圖片上傳失敗...(image-481058-1618146301090)]

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。