在 Vue 渲染函数中组合类名

Posted 2023-02-23

【中文标题】在 Vue 渲染函数中组合类名

【英文标题】：Combining class names in Vue Render Function

【发布时间】：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 中的答案会很有帮助。

【参考方案1】：

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

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

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

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