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

Posted 2023-02-23

【中文标题】如何将类从父组件应用到 Vue.js 功能组件？

【英文标题】：How to apply classes to Vue.js Functional Component from parent component?

【发布时间】：2018-10-25 13:45:37

【问题描述】：

假设我有一个功能组件：

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

现在我在一些带有类的父级中渲染这个组件：

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

结果 DOM 没有将 new-class 应用于功能子组件。现在据我了解，Vue-loader 将 Functional 组件针对 render 函数 context 编译为 explained here。这意味着类不会被直接应用和智能合并。

问题是 - 在使用模板时如何使函数式组件与外部应用的类很好地配合？

注意：我知道通过渲染功能很容易做到这一点：

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

【参考方案1】：

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

【参考方案2】：

TL;DR;

使用data.staticClass获取类，使用data.attrs绑定其他属性

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

解释：

v-bind 绑定所有其他的东西，你可能不需要它，但它会绑定像id 或style 这样的属性。问题是你不能将它用于class，因为这是一个保留的js对象所以vue使用staticClass，所以必须使用:class="data.staticClass"手动完成绑定。

如果父级未定义 staticClass 属性，这将失败，因此您应该使用 :class="data.staticClass || ''"

示例：

我无法将其显示为小提琴，因为只有 “在 *.vue 文件中定义为单文件组件的功能组件也接收正确的模板编译”

不过，我有一个有效的代码框：https://codesandbox.io/s/z64lm33vol

【讨论】：

从父级应用静态和动态类，例如<some-child class="a" :class="b: true"/> 在孩子中使用:class="[data.staticClass, data.class]"。

如何在 childComponent 上绑定所有常规静态属性：(1) 使用 :class="data.staticClass" 用于类 (2) 使用 :style="data.staticStyle" 用于样式 (3) 使用 v-bind="data.attrs" 用于 id 等。

【参考方案3】：

在功能组件示例中渲染函数，以补充@Daniel 的回答：

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

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