插槽作为 Vue 中另一个插槽的父级

Question

本质上我正在尝试编写一个工具提示组件，并且我希望工具提示对话框相对于工具提示的源绝对定位。为了实现这一点，我需要用源包装对话框并将源设置为position:relative。问题是我希望源文本和工具提示文本都是插槽/某种形式的 HTML，这样我就可以传递任意图标/格式化文本。

我已经尝试过类似的方法：

<slot name="source">
    <slot name="text"></slot>
</slot>

但据我所知，Vue 不允许这样做，因为我无法在文档中找到任何这样的示例，并且当我尝试它时也不起作用。我还研究了动态/高阶组件，但从 Vue 中的情况来看，您必须预先定义一组可能的组件/导入所有这些组件，而插槽就是这种模式的替代品。

Answer 1

这能解决问题吗？

<div class="source" style="position:relative">
  <slot name="source"></slot>
  <div class="text" style="position:abslute">
    <slot name="text"></slot>
  </div>
</div>