请教一下写前端的各位大佬， vue 动态组件如何动态定义名字呢？

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>

Jinnrry

2024-07-24 16:11:45 +08:00

@bladey #38 比如他需要请求我系统的用户信息接口，拿到用户相关资料。然后拿用户资料跟他系统的 id 关联，接着处理他直接的逻辑

<template>
<div class="hello">
<MyComponent ></MyComponent>
</div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

// 创建一个 Blob ，用于生成组件的 URL
const blob = new Blob([`<template> <div> hello world! </div> </template>`], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

const MyComponent = defineAsyncComponent(() => {
return import(url);
});

</script>

安装你的思路写了要给 demo ，这个会报错 Cannot find module 'blob:http://localhost:8080/f795bf43-d4b9-4332-ac54-0139c19ce4e1'
at http://localhost:8080/js/app.js:191:11