通常需要修补和编译从后端返回的一个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 :
但我找不到任何关于注射部件的信息.
有几个 idea ,但需要长时间的try 和错误,比如:
- 编译为SFC并以某种方式注入依赖项
- 以某种方式在渲染上提供
ctx
中的组件 - 不知何故用
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>