Vue 2中根据Props条件渲染带/不带包装器的Slot

核心思路 #

• 当needContainer为true时，渲染指定标签（如div）作为容器，绑定类名和样式，包裹Slot内容
• 当为false时，遍历Slot的所有子元素，将组件传入的类名和样式合并到每个子元素自身的class和style上，避免DOM冗余

改进后的函数式组件实现 #

<template>
  <ConditionalWrapper
    :tag="div"
    :classes="classes"
    :styles="styles"
    :need-container="needContainer"
  >
    <slot />
  </ConditionalWrapper>
</template>

<script>
export default {
  props: {
    needContainer: {
      type: Boolean,
      default: false
    },
    // 示例样式相关Props，可根据实际逻辑调整
    padding: String,
    margin: String,
    border: String,
    backgroundColor: String
  },
  computed: {
    classes() {
      // 类名计算逻辑，根据Props生成对应类
      return {
        'slot-padding': this.padding,
        'slot-margin': this.margin
      }
    },
    styles() {
      // 内联样式计算逻辑
      return {
        border: this.border,
        backgroundColor: this.backgroundColor
      }
    }
  },
  components: {
    ConditionalWrapper: {
      name: 'ConditionalWrapper',
      functional: true,
      props: {
        tag: {
          type: String,
          default: 'div'
        },
        classes: [String, Object, Array],
        styles: Object,
        needContainer: Boolean
      },
      render(h, ctx) {
        const { classes, styles, needContainer, tag } = ctx.props
        // 兼容作用域插槽和普通插槽
        const slotContent = ctx.scopedSlots.default ? ctx.scopedSlots.default() : ctx.children

        if (needContainer) {
          // 需要容器时，渲染带样式的标签包裹内容
          return h(tag, {
            class: classes,
            style: styles
          }, slotContent)
        } else {
          // 不需要容器时，遍历子元素合并样式
          return slotContent.map(child => {
            // 跳过非元素节点（如注释、纯文本）
            if (child.type !== 1) return child

            // 合并类名：子元素原有class + 组件传入的classes
            const mergedClass = [child.data?.class, classes].filter(Boolean)
            // 合并内联样式：子元素原有style + 组件传入的styles
            const mergedStyle = { ...child.data?.style, ...styles }

            // 返回修改后的子元素，兼容自定义组件和原生标签
            return h(child.componentOptions ? child.componentOptions.Ctor : child.tag, {
              ...child.data,
              class: mergedClass,
              style: mergedStyle
            }, child.children)
          })
        }
      }
    }
  }
}
</script>

关键细节说明 #

1. 样式合并逻辑：类名用数组合并（自动去重兼容多种类格式），内联样式用对象扩展（组件传入样式会覆盖子元素同名样式，符合内联样式优先级规则）
2. Slot兼容：同时处理作用域插槽和普通插槽，适配不同使用场景
3. 节点过滤：跳过非元素节点，避免无效操作
4. 组件兼容：支持Slot内的自定义组件，确保样式能正确应用

Vue 3 简化方案（模板实现） #

如果项目基于Vue 3，可直接在模板中完成逻辑，无需编写render函数：

<template>
  <div v-if="needContainer" :class="classes" :style="styles">
    <slot />
  </div>
  <template v-else>
    <slot v-for="(child, idx) in $slots.default()" :key="idx" :class="classes" :style="styles" />
  </template>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  needContainer: Boolean,
  padding: String,
  margin: String,
  border: String,
  backgroundColor: String
})

const classes = computed(() => ({
  'slot-padding': props.padding,
  'slot-margin': props.margin
}))

const styles = computed(() => ({
  border: props.border,
  backgroundColor: props.backgroundColor
}))
</script>

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