Javascript 如何将类从父组件应用到Vue.js功能组件？

假设我有一个功能组件：

<template functional>
    <div>Some functional component</div>
</template>

---

您必须使用道具将属性传递给组件

TL；博士 使用

data.staticClass

获取类，并使用

data.attrs

//...

说明：

v-bind

绑定所有其他东西，您可能不需要它，但它将绑定诸如

id

或

style

之类的属性。问题是您不能将其用于

类

，因为这是一个保留的js对象，所以vue使用

staticClass

，因此必须使用

：class=“data.staticClass”

手动完成绑定

如果父级未定义

staticClass

属性，则此操作将失败，因此应使用

：class=“data.staticClass | |”

例子： 我不能把它当作小提琴来表现，因为只有“在*.vue文件中定义为单个文件组件的功能组件也会得到正确的模板编译”

---

不过我有一个工作代码沙盒：

在功能组件示例中呈现函数，以补充@Daniel的答案：

render(createElement, { data } {
  return createElement(
    'div',
    {
      class: {
        ...(data.staticClass && {
          [data.staticClass]: true,
        })
      },
      attrs: {
        ...data.attrs,
      }
    }
  )
}

---

我们可以使用ES6计算的属性名称来设置静态类。

从父类应用静态类和动态类，例如，在子类中使用

：class=“[data.staticClass，data.class]”中的

。如何绑定子组件上的所有常规静态属性：（1）对类（2）使用

：class=“data.staticClass”

对样式使用

：style=“data.staticStyle”

（3）对id等使用

v-bind=“data.attrs”

。

Vue.component("functional-comp", {
    functional: true,
    render(h, context) {
        return h("div", context.data, "Some functional component");
    }
});

render(createElement, { data } {
  return createElement(
    'div',
    {
      class: {
        ...(data.staticClass && {
          [data.staticClass]: true,
        })
      },
      attrs: {
        ...data.attrs,
      }
    }
  )
}