vue2加载远程组件

<template>
<div class="async-component">
<div @click="child">hahah</div>
<component ref="test" :is="remote" v-if="remote" :test="test" @handler="haha"/>
</div>
</template>

<script>
import Vue from 'vue/dist/vue.common.js'
import {
loadModule
} from 'vue3-sfc-loader/dist/vue2-sfc-loader.js'
export default {
name: 'AsyncComponent',
inheritAttrs: false,
data() {
return {
remote: null,
test:"123"
}
},
mounted() {
this.load()
},
methods: {
haha(data){
alert(data)
},
child(){
this.$refs.test.handler("525555")
},
// 加载
async load() {
let baseURL = urlConfig.jkFlag ? urlConfig.jkApi : process.env.VUE_APP_API;
let url=baseURL+'/views/test.vue'
const com = await loadModule(url, {
moduleCache: {
vue: Vue,
},
// 获取文件
async getFile(url) {
const res = await fetch(url)
if (!res.ok) {
throw Object.assign(new Error(`${res.statusText} ${url}`), {
res
})
}
return {
getContentData: asBinary => (asBinary ? res.arrayBuffer() : res.text()),
}
},
// 添加样式
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), {
textContent
})
const ref = document.head.getElementsByTagName('style')[0] || null
document.head.insertBefore(style, ref)
},
})
this.remote = com
},
},
}
</script>
<style>
.async-component {
width: 100%;
}
</style>

 

 

++++++++++++++++++++++++++++++++++++++++++++++++++++++

<template>
<div class="testText" @click="haha">
<a-button type="primary">
Primary
</a-button>{{test}}哈哈哈哈哈哈哈哈哈哈哈哈交互交互加黑胡椒
</div>
</template>

<script>
export default {
props: ['test'],
mounted() {
console.log(this.$api)
},
methods: {
haha() {
this.$emit("handler", "fddsfdfsdfs")
},
handler(data) {
alert(data)
}
}
}
</script>

<style scoped>
.testText {
color: #fff;
}
</style>