首相,绝对地址中的js是这样的
此处我想引用baseUrl中的变量
(function(global, config) {
var baseUrl = {
shopId:1469,
imgUrl:'https://namek-admin.oss-cn-beijing.aliyuncs.com/changeu/fe4ad7af6de5429b9c5052283fd8ecf0.jpg'
}
global.baseUrl = baseUrl;
}) (this, this.config || {});
然后在vue中需要新建一个组件挂载这个js
组件内容是这样的,就相当于组件间传值
<template>
<remote-js :src="this.jsUrl" @load-js-finish="this.jsLoadCallBack"></remote-js>
</template>
<script>
export default {
components: {
'remote-js': {
render (createElement) {
var self = this
return createElement('script', {
attrs: { type: 'text/javascript', src: this.src },
on: {
load: function () {
console.log('load js')
self.$emit('load-js-finish')
}
}
})
},
props: {
src: { type: String, required: true }
}
}
},
props: {
jsUrl: { type: String, required: true },// 需要加载的外部url
jsLoadCallBack: Function// 外部js加载完成回调
}
}
</script>
然后在哪个组建中需要用到这些变量,就需要在哪个组件中引用,,比如
<template>
<div>
<img :src="img_url" alt="">
<remote-js :js-url="'http://h5t.nam.xyz/data.js'" :js-load-call-back="loadRongJs"></remote-js>
</div>
</template>
<script>
import RemoteJs from './remoteJs'// 导入组件
export default {
name: "index",
data() {
return {
img_url:''
}
},
components: {
RemoteJs
},
methods:{
loadRongJs() {
console.log(baseUrl)
this.img_url = baseUrl.imgUrl;
}
}
}
</script>
<style scoped>
</style>
然后你改动绝对地址的js中的内容就可以看到变化了,
以上是我在百度中找的一些例子,根据自己需要的整理出来的,原理也不是很明白,希望能够帮到你们
祝工作顺利,身体健康