在 Vue 渲染函数中组合 class 个名称

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 class 名称组合起来？

<div class="foo skeleton"/>

知道 Vue 2 和 3 中的答案会很有帮助。

Answer 1

使用渲染函数时，class 是一个特殊属性，在 options object:

中有自己的属性

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

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

a string, object, or array of strings and objects.

在 Vue 渲染函数中组合 class 个名称

Combining class names in Vue Render Function

javascript

vue.js

vue-component

vuejs2

vue-render-function