将字符串转换为 vNode vue

Question

我有一个类似于这个的字符串保存在数据库中：

Lorem #ipsum dolor sit amet, #consectetur adipiscing elit, sed do #eiusmod tempor incididunt ut labore et dolore magna aliqua.

如您所见，有些词是标签 (#ipsum)。

我想要实现的是在

span

中呈现字符串并将所有主题标签放在可点击的链接中。

到目前为止我所做的是：

let caption = ref(props.caption); // the text above
const tagRegex = /(#+[a-zA-Z0-9(_)]{1,})/g;

caption.value = caption.value.replace(tagRegex, `<a href="/$1">$1</a>`);

return () => h("span", { "innerHTML": caption.value, class: "text-pre" });

这按预期工作，我可以看到相关主题标签的文本和所有可点击

a

。

第二步是将

a

替换为

router-link

（Vue Router），并将

href

替换为

to

。

尝试简单地替换它们是行不通的。 DOM 呈现

router-link

但不幸的是它没有编译并且什么都不做。

我试图用

innerHTML

替换

v-html

但是它不起作用。

我尝试使用子节点创建多个节点，但即使在这里我也失败了。

你知道我怎样才能达到这个结果吗？谢谢

Answer 1

我不知道您使用的是 Vue 3 还是 2，但我猜是 Vue 3。 这是在文本中动态创建路由器链接的快速示例。

Vue 3 动态组件示例

没有必要为此使用渲染函数。使用

<component>

组件，您可以通过提供

is

属性动态创建组件。 如果你想使用渲染功能，你可以使用

h

函数映射创建 VNodes 的部分