问题标签 [vue-teleport]

Vue 3 有一个新的 Teleport 功能，它取代了 vue 2 中的 portal-vue 插件。但是，我发现不可能将组件移植到由 vue 控制的地方（=在 vue 应用程序中）。它仅在移植到外部（身体，其他元素......）时才有效。

如您所见，控制台甚至报告说需要已经渲染传送目标。但是如何告诉 vue 先渲染哪个组件呢？在我的示例中，目标位于传送之前的 dom 中。

这在portal-vue 中不是问题，而且非常令人沮丧，因为它使整个概念变得不那么可用。

我有一个带有子组件和道具的视图，在单击 tr 时，我们显示具有不同值的模态，因此在单击 TR 选项卡后属性设置不同

}

这里是模态

问题我有一个突变道具错误，我真的不知道如何将动态道具传递给我的模态并使其正常工作？

在 Vue 3 中，可以像这样将组件传送到body标签：

这会导致上面的模态对话在body标签中呈现。如何在 Vue 2 中实现类似的功能？

我有一个使用 Teleport to 的组件，测试 html 似乎没有按预期工作。我找不到有关此特定用途的任何文档。这是我的测试：

最小的组件如下所示：

我错过了什么吗？

似乎默认情况下teleport不会使用renderToString.

有谁知道如何teleport在 Vue3 中渲染和水合组件？

我在这里找到了一些测试，但无法弄清楚如何将其应用于现实世界的示例，也找不到有关此主题的任何信息。

我想像这样实现一个幻灯片：https ://tailwindui.com/components/application-ui/overlays/slide-overs

这个例子工作得很好，但现在我想决定如何显示和隐藏幻灯片。

当然我可以使用这样的按钮：

在我的情况下，我必须使用多个滑盖，并且我必须确保同时只有一个滑盖处于活动状态。

所以让我们假设我得到了这个：

所有滑盖可以同时处于活动状态。当然，我可以通过执行类似的操作来创建一个处理此问题的方法，@click="openmodal = 'modal1'"但在我的情况下，我需要此状态是全局的，因此所有视图都会“知道”当前哪个滑过处于活动状态......

在 vuejs2-times 中，我会使用 vuex 来存档它。但我不确定，这是否是 vuejs3 的方式。

我想为我的组件库创建选项卡组件。我希望组件像这样工作tabs：tab

所以我们有两个组件，它们有一些 props，包括 is-active，默认情况下是 false。

父组件 -tabs.vue将是这样的

这里我们有我们单曲的包装器tab，它将使用插槽显示在这里。在这个“父”组件中，我们还持有selectedIndex指定选择哪个选项卡以及更改此值的功能。

TLDR现在你们可能已经注意到了，tab.vue我有一个带有类的 div tabs__menu，我想将一些东西传送到其中。当title道具进入<tab>由 tabs.vue 中的插槽显示的组件时，我想从一个选项卡传送到另一个选项卡。

我的tab.vue：

但是，这span不会被传送。当我为这篇文章运行第一个片段时，我看不到它的显示，也没有在 DOM 中看到它。

为什么传送跨度不显示？

许多开发人员开始<teleport>在他们的组件中使用。例如 primeVue 中的下拉组件，使用传送来选择选项，并将它们发送到正文的末尾。

这虽然给 CSS 定位带来了很大的问题/问题，但我不能使用父类来定位这里是直接示例：

有风格

这个 css 将失败，原因很简单，选项 html 不在“.red-container”内，而是在正文的末尾，因为组件作者决定使用<teleport>它，所以似乎不可能根据父类来设置它的样式。

我在进行版本维护更新时在几个组件中遇到了这种行为，破坏了我所有的主题，问题是我不知道如何解决这个问题？

您如何使用父类定位传送的内容 CSS，甚至可能吗？