Vue2中如何条件渲染组件并按需省略<span>标签

以下几种写法可以避免重复渲染组件，让代码更简洁精准：

方案一：使用渲染函数（Render Function） #

直接在组件的render方法中做逻辑判断，只创建一次目标组件实例，根据条件决定是否用<span>包裹：

export default {
  props: {
    trueCase: {
      type: Boolean,
      required: true
    }
  },
  render(h) {
    // 创建目标组件实例
    const targetComponent = h('Component');
    // 根据条件返回包裹后的组件或原组件
    return this.trueCase ? h('span', [targetComponent]) : targetComponent;
  }
}

方案二：封装通用条件包裹组件 #

如果多个地方需要类似的条件包裹逻辑，可以封装一个复用组件，通过插槽传递内容：

<!-- ConditionalWrapper.vue -->
<template>
  <span v-if="shouldWrap">
    <slot />
  </span>
  <template v-else>
    <slot />
  </template>
</template>

<script>
export default {
  props: {
    shouldWrap: {
      type: Boolean,
      default: false
    }
  }
}
</script>

使用时只需传入条件并嵌套目标组件：

<ConditionalWrapper :shouldWrap="trueCase">
  <Component />
</ConditionalWrapper>

方案三：模板内简化写法（无额外组件） #

如果不想用渲染函数或封装组件，也可以用<template>标签减少冗余（注意：组件会被渲染两次，但Vue的diff算法会优化实际DOM更新）：

<template>
  <span v-if="trueCase">
    <Component />
  </span>
  <template v-else>
    <Component />
  </template>
</template>

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