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

Question

假设我有一个功能组件：

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

现在，我在具有类的某些父级中呈现此组件：

<parent>
    <some-child class="new-class"></some-child>
</parent>

Resultant DOM尚未new-class应用于Functional子组件。现在，据我所知，Vue-loader编译功能对组件render功能context为这里解释。这意味着将不会直接应用类并智能地合并它们。

问题是- 使用模板时，如何使功能组件与外部应用的类很好地协作？

注意：我知道可以通过render函数很容易做到这一点：

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

Answer 1

没有渲染功能的方法是：

<template functional>
  <div class="my-class" :class="data.staticClass || ''" v-bind="data.attrs">
    //...
  </div>
</template>

v-bind绑定了所有其他内容，您可能不需要它，但是它将绑定诸如之类的东西id。但是您不能将其用于类，因为这是一个保留的js对象，所以vue使用staticClass，因此绑定必须使用手动完成:class="data.staticClass"，并且由于该类可能不是由父类定义的，因此您应该使用:class="data.staticClass || ''"

我不能把它当作小提琴，因为只有“在* .vue文件中定义为单文件组件的功能组件也可以接收正确的模板编译”

我有一个工作中的codeandbox：https：//codesandbox.io/s/z64lm33vol