在 Vue Render Function 中组合类名

问题描述

我有一个使用渲染函数的 Vue 2 组件，如下所示：

export default {
  name: "u-skeleton",render(createElement) {
    return createElement("div",{
      attrs: {
        class: "skeleton"
      },});
  },};

当我像这样使用组件时：

<u-skeleton class="foo"/>

HTML 输出是：

<div class="foo"/>

我怎样才能做到这一点，以便组合 CSS 类名？

<div class="foo skeleton"/>

了解 Vue 2 和 3 中的答案会很有帮助。

解决方法

使用渲染函数时，class 是一个特殊的属性，它在 options object 中有自己的属性：

render(createElement) {
  return createElement("div",{
    class: 'skeleton'
  });
}

使用 attrs 属性代替 class，它可以是：

一个字符串、对象或字符串和对象的数组。