之所以要做这个是因为,在一个组件内部需要引入一个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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。