Vue - 用标签动态包围组件

Posted

技术标签:

【中文标题】Vue - 用标签动态包围组件【英文标题】:Vue - Surround a component with a tag dynamically 【发布时间】:2021-07-09 08:12:18 【问题描述】:

我想说的是v-if 指令可以使整个组件(及其所有内容)根据条件消失。

我的问题是: 有没有办法只让周围的标签或组件消失,而不删除其内容?

【问题讨论】:

【参考方案1】:

当你需要一个无根组件时,你可以使用 dynamic component 和 :is 属性和 vue-fragment,或者如果这正是你所需要的,则可以直接使用 vue-fragment。

另一种选择是直接操作 DOM。

【讨论】:

【参考方案2】:

不,你不能这样做。我想到的第一件事是将您的内容移动到单独的组件中以避免代码重复并执行类似的操作

<wrapper v-if="condition">
  <child />
</wrapper>
<child v-else />

如果你提供一些关于你为什么需要这个的细节,也许我们可以找到更好的解决方案。

【讨论】:

是的,我也是这么想的。问题是这样做我必须创建“中间组件”。这意味着我的中间组件必须反映我的子组件的所有道具(并且我有很多道具)。有没有快速反映道具的方法? (抱歉跑题了) @Freder Use component element?

以上是关于Vue - 用标签动态包围组件的主要内容,如果未能解决你的问题,请参考以下文章

vue 动态组件,适合作tab

第 005 期 Vue 性能优化之减少渲染的次数

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

带有 Vue 选项卡的组件标签中的动态道具

vue如何动态添加多个li

react中向组件内部动态传入标签(带参数)