javascript - 在 Vue 渲染函数中组合类名

Question

我有一个使用渲染函数的 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 中的答案会很有帮助。

Answer 1

使用渲染函数时，是一个特殊属性，在选项对象class中有自己的属性：

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

而不是attrs，使用class可以是的属性：

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