vue 版本：3.3
背景：我项目里面希望给第三方提供一个页面。第三方通过网络接口的方式返回 html 代码，我程序里面把别人的 html 代码嵌入到我的页面中。
目前想到的方案：
1 、使用 v-html 标签嵌入。问题：这种方式嵌入，对方页面中如何调用我 vue 页面的方法属性呢？比如我这里有一个$http 变量是 axios 的实例，这个里面封装的验签相关处理，他必须用我这个$http 属性才能正常调用接口，不然他过不去验签。
2 、使用 vue 的异步组件。目前还没研究明白怎么用
下面是 demo 代码
```
<template>
<div id="main">
<el-tabs type="border-card">
<el-tab-pane v-for="(html,name) in pluginList" :label="name">
// 方案 1
<div v-html="html">
</div>
// 方案 2
<AsyncComp /> // 这样写的话第二个 plugin 又叫啥名字呢？
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const $http = app.appContext.config.globalProperties.$http
import { defineAsyncComponent } from 'vue'
const pluginList = reactive({})
$http.get('/api/plugin/list').then(res => {
if (res.data != null && res.data.length > 0 ) {
pluginList[res.data] = ""
getPlugHtml(res.data)
}
})
const getPlugHtml = function(name){
// 方案 1
$http.post('/api/plugin/settings/'+name+"/index").then(res => {
if (res.data != null && res.data!="" ) {
pluginList[name] = res.data
}else{
pluginList[name] = "Load Error!"
}
})
// 方案 2. 但是 AsyncComp 这个名字怎么处理呢？这里换成变量以后，我模板里面的代码该怎么调用异步组件呢？
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
$http.post('/api/plugin/settings/'+name+"/index").then(res => {
if (res.data != null && res.data!="" ) {
resolve(res.data)
}else{
reject("Plugin Load Error!")
}
})
})
})
}
</script>
``` |
|
