@Jinnrry #4 ，但是你的这个需求就不是一个简单的需求啊，得有一整套的方案。就是前两年常常提到的微前端。
如果单纯为了临时解决就选择 iframe 。数据交互可以用 [postMessage]( https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)

看看 vue 文档动态组件,异步组件部分

不想麻烦直接挂载全局就行了  稍微复杂一些就是提供一个 js 文件，里面封装你要提供的 API ，更复杂就是搞微前端，或者服务端渲染

或者可以让第三方用 h() 创建组件，然后你封装一些方法供第三方调用就行。通过接口返回第三方写的 h() 在通过 defineComponent 创建组件，传入你自己定义的方法。

<el-tabs v-model="activeName">
      <el-tab-pane v-for="(html, name) in pluginList"  :label="name">
        <component :is="asyncCpt" :http="$http" />
      </el-tab-pane>
</el-tabs>

const activeName = ref('');
const asyncCpt = ref(null);
watch(activeName, async (newVal) => {
  asyncCpt.value = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      $http.post('/api/plugin/settings/' + newVal + '/index').then((res) => {
        if (res.data != null && res.data != '') {
          resolve(res.data);
        } else {
          reject('Plugin Load Error!');
        }
      });
    });
  });
});

你不如在这个组件里面

onMounted(() => window.pluginContext = {'$html': $html, ... 任何你想要传递的属性});

然后在你的插件里面通过 window.pluginContext 拿到上下文。

用 CustomEvent 不就好了： https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent

用 webcomponent ，直接用 esm 加载这个定义了 webcomponent 的 js 文件，然后 v-html 渲染这个 webcomponent 标签，不过这种方案三方的权限很大，如果你需要管控还是需要微前端

你这个是拿到的是 .vue 文件，不是编译后的 .js 代码，要不叫后端返回的时候给你编译为 js ，这样你直接用 import('/api/vue.js') 去引入

要不你就自己在前端使用 vue/compiler-sfc 将拿到的 .vue 字符串编译为组件对象

多年前端，全栈都会一些。你这个要求，既要简单，又要安全，还要通讯等等，实现不了。符合你需求的是后端模板，如 Thymeleaf 。