我猜测你的需求是把特定组件插入到指定位置,但是开发阶段无法确定要渲染的内容。即加载一段文本,文本里包含一些特定标记,然后你要根据这些字符串判断需要什么特定组件,然后把它们渲染到这些特定标记里面。有两个方案,一个是使用 MDX 之类的现成方案。另一种是手搓。比如拿到文本后,将其中的标记找出来,然后生成一个数组,然后通过 <teleport> 把组件塞进去。下面是一些参考用的伪代码:const text = ref<string>(''); const items = computed<string[]>(() => { return getItemsFromText(text.valuue); }); const newHtml = computed<string>(() => { return text.replace(/xxx\-(\w+)/g, '<span id="xxx-$1"></span>'); }); onMounted(() => { text.value = await fetchData(url); // 加载动态数据 });<article v-html="newHtml" /> <template v-for="item in items" :key="item" > <teleport :to="item"> <your-comp :data="item" /> </teleport> </template>
我猜测你的需求是把特定组件插入到指定位置,但是开发阶段无法确定要渲染的内容。即加载一段文本,文本里包含一些特定标记,然后你要根据这些字符串判断需要什么特定组件,然后把它们渲染到这些特定标记里面。
有两个方案,一个是使用 MDX 之类的现成方案。另一种是手搓。
比如拿到文本后,将其中的标记找出来,然后生成一个数组,然后通过
<teleport>
把组件塞进去。下面是一些参考用的伪代码: