Vue中如何条件渲染父元素且不影响子元素正常渲染

有三种常用实现方式，可根据你的实际场景选择：

方案1：双分支直接渲染（最直观） #

直接写两个条件分支分别对应两种渲染结果，适合子元素内容简单的场景：

<template lang="html">
  <!-- 条件满足时仅渲染子元素 -->
  <div id="child" v-if="condition">
    some content
  </div>
  <!-- 条件不满足时保留父子结构 -->
  <div id="parent" v-else>
    <div id="child">
      some content
    </div>
  </div>
</template>

将代码中的condition替换为你的业务判断条件即可。

方案2：抽离子内容为公共组件（易维护） #

如果子元素内容复杂、后续可能复用，可以把公共的子部分单独封装为组件，避免重复代码：

1. 先封装子组件ChildContent.vue：

<template lang="html">
  <div id="child">
    some content
  </div>
</template>

2. 父组件中调用：

<template lang="html">
  <ChildContent v-if="condition" />
  <div id="parent" v-else>
    <ChildContent />
  </div>
</template>

方案3：动态组件实现（无重复代码） #

利用component动态标签特性，条件满足时渲染不生成真实DOM的template标签，不需要重复编写子元素代码：

<template lang="html">
  <component 
    :is="condition ? 'template' : 'div'"
    v-bind="condition ? {} : {id: 'parent'}"
  >
    <div id="child">
      some content
    </div>
  </component>
</template>

如果原父元素有其他自定义属性、事件，都可以放到v-bind的返回对象中统一管理。

内容的提问来源于stack exchange，提问作者e2r3p13