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

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

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

阅读 2.2k
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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏