如何包装使用组件动态添加的标签？答案

【问题标题】：How to wrap a tag that was dynamically added with a component?如何包装使用组件动态添加的标签？
【发布时间】：2020-06-04 13:40:00
【问题描述】：

我有一个工具提示组件，它通过环绕用户悬停的东西来工作。

<MyTooltip
  :content="`This text will be shown in tooltip`"
>
  Hover over me to see tooltip
</MyTooltip>

我想用tooltip组件包裹<a class="Bug"></a>标签，像这样：

<p>some 
<MyTooltip content="some content">
    <a class="link">Bug</a class="bug">bug 111</p> was found
</MyTooltip>
</p>

这个<a class="Bug"></a> 标记是通过在renderMsg 中进行正则表达式匹配动态添加的。

<div @mouseover="onHover>
   <span
     v-html="renderMsg(msg)"
   />
</div>

methods: {
  renderMsg(msg) {
    return txt.replace(some_regex_object, '<a class="bug">$&</a>');
  },
  onHover(e) {
    if (e.target.className === 'bug') {
      // tried adding `<MyTooltip content="some content">${e.target.outerText}</MyTooltip>` to DOM
    }
  },
},

所以你知道挑战在哪里...我使用 dom 操作界面将 <a class="Bug"></a> 修改为 <MyTooltip><a class="Bug"></a></MyTooltip>（类似于 parentNodeOfATag.replaceChild 的新 dom 元素包含工具提示标签）。 <MyTooltip> 被渲染为 <MyTooltip> 本身没有任何意义。

【问题讨论】：

能否请您也发布组件的props 和/或data 部分。这确实需要更多上下文，例如这个工具提示组件的根元素是什么？ div?最好把剩下的相关代码贴出来。
但有一点是肯定的，你永远不应该使用 Vue 操作 DOM，除非动态元素是有意为静态和非反应性的。

标签： javascript vue.js

【解决方案1】：

vue slot 不能解决你的问题吗？ https://vuejs.org/v2/guide/components-slots.html

应该是这样的：

<MyTooltip content="some content">
<slot />
</MyTooltip>

您可以在 Tooltip 中动态添加任何内容。

【讨论】：