如何从父组件为Vue.js函数式组件应用类名？

你说得没错，用模板写的函数式组件默认不会自动继承外部传入的class、style这些属性——这是因为模板编译后的函数式组件不会自动把上下文里的属性绑定到根元素上，不像你用render函数时直接传入context.data那么直接。

不过解决方法很简单，只需要在组件的根元素上加上v-bind="$attrs"就行，具体操作看下面的示例：

基础解决方案 #

把你原来的函数式组件模板修改成这样：

<template functional>
  <div v-bind="$attrs">Some functional component</div>
</template>

这样外部传入的class="new-class"就会被自动绑定到根div上，最终DOM里就能看到这个类名了。

带有自身类名的情况 #

如果你的组件本身需要有固定类名，同时要合并外部传入的类名，直接叠加写就行，Vue会自动帮你合并两个类名：

<template functional>
  <div class="component-self-class" v-bind="$attrs">
    Some functional component with self class
  </div>
</template>

比如外部传入class="new-class"，最终根元素的类名会是component-self-class new-class。

原理说明 #

函数式组件的模板编译后，会将外部传入的所有属性（包括class、style、自定义属性等）都放到$attrs这个对象里。通过v-bind="$attrs"，我们相当于把这些属性一次性绑定到根元素上，效果和你用render函数时传递context.data完全一致。

内容的提问来源于stack exchange，提问作者Harshal Patil