在 Vue 渲染函数中组合类名答案

【问题标题】：Combining class names in Vue Render Function在 Vue 渲染函数中组合类名
【发布时间】：2021-05-28 19:25:02
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-render-function

【解决方案1】：

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

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

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

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

【讨论】：