Question

假设我有一个功能组件：

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

现在我使用类在一些父级中呈现此组件：

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

结果DOM没有将new-class应用于Functional子组件。据我所知，Vue-loader将render函数context的功能组件编译为explained here。这意味着不会直接应用类并智能地合并。

问题是 - 如何在使用模板时使功能组件与外部应用的类完美匹配？

注意：我知道可以通过渲染功能轻松实现：

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文件中定义为单个文件组件的功能组件也会收到正确的模板编译”

我有一个工作代码盒：https://codesandbox.io/s/z64lm33vol

Answer 2

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

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

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

Answer 3

您必须使用props将属性传递给组件 https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

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

3 个答案: