Vue 2如何实现仅为子元素加类、自身不在DOM中渲染的组件？

要实现自身不渲染DOM节点、仅给子元素追加类名的组件，核心是避开Vue 2 template必须有单个根节点的限制，使用render函数直接返回处理后的子节点数组，Vue渲染时会直接展开这些子节点，不会生成额外的外层DOM。

完整组件代码 #

// Stack.vue 组件实现
export default {
  name: 'Stack',
  props: {
    // 后续子元素统一追加的间距类
    gap: {
      type: String,
      default: 'mt-12'
    },
    // 第一个子元素单独追加的间距类
    firstGap: {
      type: String,
      default: ''
    }
  },
  render(h) {
    // 获取默认插槽内容，过滤空白文本节点
    const validChildren = this.$slots.default?.filter(vnode => vnode.tag) || []
    // 遍历处理每个子节点，追加对应类名
    return validChildren.map((vnode, index) => {
      const targetClass = index === 0 ? this.firstGap : this.gap
      if (!targetClass) return vnode

      if (!vnode.data) vnode.data = {}
      // 处理静态类
      if (vnode.data.staticClass) {
        vnode.data.staticClass += ` ${targetClass}`
      } else {
        vnode.data.staticClass = targetClass
      }
      // 兼容动态class（支持字符串、数组、对象三种写法）
      if (vnode.data.class) {
        if (Array.isArray(vnode.data.class)) {
          vnode.data.class.push(targetClass)
        } else if (typeof vnode.data.class === 'object') {
          vnode.data.class[targetClass] = true
        } else {
          vnode.data.class += ` ${targetClass}`
        }
      }
      return vnode
    })
  }
}

使用示例 #

<stack first-gap="mt-32" gap="mt-12">
  <some-component />
  <div></div>
  <other-component />
</stack>

渲染后完全符合你预期的无嵌套结构，所有子元素会自动追加配置的类名。

兼容说明 #

• 自动兼容子元素的静态class、绑定的动态class
• 自动过滤插槽内的换行、空格等无效文本节点
• 类名可灵活配置，也可修改逻辑实现内联样式、自定义属性的批量注入

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