有条件地将子元素包装在模板中而不重复

Question

我有一个模板需要根据布尔道具稍微不同地呈现。如果它是真的，那么包装器必须在子元素之外，如果为false，则需要包装其中一个子元素。

我能想到的唯一方法是复制模板中的子元素，如下所示：

showPopUpVc()

有没有办法在不重复PopUpVC声明的情况下执行此操作，例如可能包含大量道具。

Answer 1

条件类绑定怎么样，ref Class and Style Bindings

<template>
  <div :class="{ wrapper: flag}">
    <component-a />
    <div :class="{ wrapper: !flag}">
      <component-b />
    </div>
    <component-c />
  </div>
</template>

替代指定的广告位（未经测试）

假设将模板拆分为父级和子级是值得的，我认为您可以在多个位置使用具有相同名称的命名槽，前提是您使用v-if仅编译一个一次一个例子。

参考：Conditional slots, is it possible

儿童

<template>
<div>
  <template v-if="flag">
    <div class="wrapper">
      <slot name="component-a">
      <slot name="component-b">
      <slot name="component-c">
    </div>
  </template>

  <template v-if="!flag">
    <slot name="component-a">
    <div class="wrapper">
      <slot name="component-b">
    </div>
    <slot name="component-c">
    </div>
  </template>
</div>
</template>

<强>父

<child>
  <component-a slot="component-a" />
  <component-b slot="component-b" />
  <component-c slot="component-c" />
</child>