vue3里面如何将字符串转成vue里面的插槽？

Question

vue3里面如何将字符串转成vue里面的插槽

vue3里面如何将字符串转成vue里面的插槽

Answer 1

我猜测你的需求是把特定组件插入到指定位置，但是开发阶段无法确定要渲染的内容。即加载一段文本，文本里包含一些特定标记，然后你要根据这些字符串判断需要什么特定组件，然后把它们渲染到这些特定标记里面。

有两个方案，一个是使用 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>