Vue渲染函数中如何获取默认插槽子元素的class类名

你在render阶段拿不到elm和componentInstance是正常的：render函数执行时仅完成VNode的生成，此时VNode还未挂载到DOM，也未完成组件实例的初始化，这两个属性要等到挂载完成后才会被赋值，所以不能在render阶段通过这两个属性获取类名。

正确的类名获取方式如下：
插槽返回的VNode上，所有模板声明的属性都存在VNode.data字段中，类名分两种存储：

• 静态类名（直接写在标签上的class="xxx"）存储在item.data.staticClass，值为字符串格式
• 动态类名（通过:class="xxx"绑定的类名）存储在item.data.class，值可以是字符串、数组、对象，和模板中:class的支持格式完全一致

你只需要把这两个字段合并后传递给Wrapper组件的class配置即可，修改后的render函数参考：

render(createElement) {
    const childs = [];
    this.$slots.default.forEach(item => {
      if (item.tag) {
        const wrapperClass = []
        if (item.data) {
          // 合并静态类名
          if (item.data.staticClass) {
            wrapperClass.push(item.data.staticClass)
          }
          // 合并动态类名
          if (item.data.class) {
            wrapperClass.push(item.data.class)
          }
        }
        // 将合并后的类名传递给Wrapper组件
        childs.push(createElement("Wrapper", {
          class: wrapperClass
        }, [item]));
      }
    });

    return createElement(this.tag, { class: this.classes }, childs);
  }

补充说明：如果你的Wrapper组件是自定义组件，类名默认会自动挂载到Wrapper组件的根元素上，和你预期的渲染效果完全一致。如果Wrapper组件配置了inheritAttrs: false，你需要自行在Wrapper组件内接收class属性并绑定到对应元素上。

内容的提问来源于stack exchange，提问作者Marine Le Borgne