通常需要修补和编译从后端返回的一个HTML(在我的例子中是一个SVG).

我只使用了最简单的版本

import {compile} from 'vue'; 
const component = compile(text);

但现在我用DOM修补源代码,并在其中注入其他组件. 为此,我需要使用app.component()来注册所有注入的组件.

这显然是糟糕的,原因有几个.

我们可以注射本地进口的部件吗?喜欢:

import Tooltip from 'Tooltip.vue';
import {compile} from 'vue'; 
const component = compile(text, {components:[Tooltip]});

compile绝对有一套广泛的 Select :

https://github.com/vuejs/core/blob/fef2acb2049fce3407dff17fe8af1836b97dfd73/packages/compiler-core/src/options.ts

但我找不到任何关于注射部件的信息.

有几个 idea ,但需要长时间的try 和错误,比如:

  1. 编译为SFC并以某种方式注入依赖项
  2. 以某种方式在渲染上提供ctx中的组件
  3. 不知何故用defineComponent美元做到了这一点

但我想不出一个正确的方向,任何帮助都将不胜感激.

到目前为止,我找到的唯一有效的方法是<component>,但我想直接使用组件名称作为标记(当然,我可以修补源代码以将自定义组件更改为<component>,但无论如何):

<script setup>
import { compile, h } from 'vue'

const comp = compile('<component :is="test"></component>');
const test = () => h('div', 'TEST');
</script>

<template>
  <comp :test/>
</template>

推荐答案

compile编译一个模板来呈现按名称解析组件的函数,即<SomeComp>变成h(resolveComponent('SomeComp'),这需要在使用呈现函数的上下文中注册SomeComp组件,这不需要从compile进行特殊处理.

在这种情况下,可能是:

const DummyComponent = {
  name: 'DummyComponent',
  render: compile(`<div><SomeComp/></div>`),
  components: { SomeComp }
};

并呈现为任何动态组件,例如在模板中:

<component :is="DummyComponent"></component>

Vue.js相关问答推荐

VueJS 中的 VisJS 时间轴:带有图像的项目放错了位置

如何将外部 svg 转换为 Vue3 组件?

处理多张卡片中的按钮

我在表格中创建了一个包含信息的新行,但在 Cypress e2e 测试中我无法获得最后一行(新行)

何时将代码拆分为 Nuxt 中的组件?

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

如何在 vue 组件之外访问$apollo?

用 axios 搜索:新字符时取消之前的请求

为什么组件在 v-if 下没有被销毁

Vue.js 无法切换字体真棒图标

此 set-cookie 已被阻止,因为它具有 samesite=lax

在 v-for 循环中使用 v-model

基本 vue.js 2 和 vue-resource http 获取变量赋值

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据?

Vue在按钮单击时添加一个组件

单击时交换组件

使用 Vue 的点击编辑文本字段

Vue 2 转换不起作用

v-for 中的计算(Computed)/动态(Dynamic) v-model 名称

如何将props传递给组件的故事?